PHP Total Station Development Engineer-NO. 09 Chapter CSS3 Special Effects & Animation

PHP Total Station Development Engineer-NO. 08 Chapter CSS Complex Selector

CSS3 Transition Transition 1. Transition Properties

Property	Describe	Css
Transition	Shorthand property, which is used to set four transition properties in a property.	3
Transition-property	Specify the name of the CSS property that applies the transition.	3
Transition-duration	Define the time that the transition effect takes. The default is 0.	3
Transition-timing-function	A time curve that prescribes a transition effect. The default is "ease".	3
Transition-delay	Specify when the transition effect will begin. The default is 0.	3

Example: demo01

<! DOCTYPE html>
 

CSS3 Conversion Transform 1. Conversion Properties


 
 
 
  
 
   
 
    
Property
 
    
Describe
 
    
Css
 
   
 
   
 
    
Transform
 
    
elements that apply to 2D or 3D conversions
 
    
3
 
   
 
   
 
    
Transform-origin
 
    
Allows you to change the location of the transformation element
 
    
3
 
   
 
  
 

 
 
2.2D conversion 
2D Conversion Method 

 
 
 
  
 
   
 
    
Function
 
    
Describe
 
   
 
   
 
    
Matrix (N,n,n,n,n,n)
 
    
Defines a 2D conversion, using a six-value matrix. Elective
 
   
 
   
 
    
Translate (x,y)
 
    
Defines a 2D transformation that moves elements along the X and Y axes.
 
   
 
   
 
    
Translatex (N)
 
    
Defines a 2D transformation that moves elements along the x-axis.
 
   
 
   
 
    
Translatey (N)
 
    
Defines a 2D transformation that moves elements along the y-axis.
 
   
 
   
 
    
Scale (X,y)
 
    
Defines a 2D scaling transformation that changes the width and height of an element.
 
   
 
   
 
    
ScaleX (N)
 
    
Defines the 2D scaling conversion, changing the width of the element.
 
   
 
   
 
    
ScaleY (N)
 
    
Defines the 2D scaling conversion, changing the height of the element.
 
   
 
   
 
    
Rotate (angle)
 
    
Define the 2D rotation, and specify the angle in the parameter.
 
   
 
   
 
    
Skew (X-angle,y-angle)
 
    
Defines the 2D skew conversion, along the X and Y axes.
 
   
 
   
 
    
Skewx (angle)
 
    
Defines the 2D skew conversion, along the x-axis.
 
   
 
   
 
    
Skewy (angle)
 
    
Defines the 2D skew conversion, along the y-axis.
 
   
 
  

 
 
Translate (? px) Position transform



The translate () method moves from the current element position, based on the arguments given at the left (x-axis) and top (y-axis) positions. rotate (? deg) Rotation


Rotate () method, an element that rotates clockwise in a given degree. Negative values are allowed, so that the elements rotate counterclockwise.

Scale (x,y) dimension change


Scale () method, which increases or decreases the size, depending on the width (x axis) and the height (y-axis) Parameters: skew (? deg,?deg) Skew

Transform:skew (<angle> [, <angle>]);
 
Contains two parameter values, representing the angle of the x-axis and y-axis skew, and the default of 0 if the second argument is null, and the negative representation of the parameter to the opposite direction.

SKEWX (<angle>) indicates a tilt only on the x-axis (horizontal direction). Skewy (<angle>) indicates tilt only in the y-axis (vertical direction). 3.3D conversion 3D Conversion Method


 
 
 
  
 
   
 
    
Function
 
    
Describe
 
   
 
   
 
    
Matrix3D (N,n,n,n,n,n,
N,n,n,n,n,n,n,n,n,n)
 
    
Defines a 3D conversion, using a 4x4 matrix of 16 values.
 
   
 
   
 
    
Translate3d (X,y,z)
 
    
Define 3D transformations.
 
   
 
   
 
    
Translatex (x)
 
    
Define 3D conversions, using only the values used for the X axis.
 
   
 
   
 
    
Translatey (y)
 
    
Define 3D conversions and use only values for the Y axis.
 
   
 
   
 
    
Translatez (z)
 
    
Define 3D conversions, using only the values used for the Z axis.
 
   
 
   
 
    
Scale3d (X,y,z)
 
    
Defines a 3D scaling conversion.
 
   
 
   
 
    
ScaleX (x)
 
    
Defines a 3D scaling conversion by giving the value of an X axis.
 
   
 
   
 
    
ScaleY (y)
 
    
Defines a 3D scaling conversion, given a value of the y-axis.
 
   
 
   
 
    
Scalez (z)
 
    
Defines a 3D scaling conversion, given a value of the z-axis.
 
   
 
   
 
    
Rotate3d (X,y,z,angle)
 
    
Define 3D rotation.
 
   
 
   
 
    
Rotatex (angle)
 
    
Defines a 3D rotation along the x-axis.
 
   
 
   
 
    
Rotatey (angle)
 
    
Defines a 3D rotation along the y-axis.
 
   
 
   
 
    
Rotatez (angle)
 
    
Defines a 3D rotation along the z-axis.
 
   
 
   
 
    
Perspective (N)
 
    
Defines a perspective view of a 3D transformation element.
 
   
 
  

 
 
CSS3 Transform-origin Properties 
Transform-origin:x-axis Y-axis Z-axis;


 
 
 
  
 
   
 
    
Value
 
    
Describe
 
   
 
   
 
    
X-axis
 
    
Defines where the view is placed on the X axis. Possible values:
Left
Center
Right
Length
%
 
   
 
   
 
    
Y-axis
 
    
Defines where the view is placed on the y-axis. Possible values:
Top
Center
Bottom
Length
%
 
   
 
   
 
    
Z-axis
 
    
Defines where the view is placed on the z-axis. Possible values:
Length
 
   
 
  
 

 
 
Example: demo02

Html:

<! DOCTYPE html>  
 CSS: 
 

*, *:after, *:before {box-sizing:border-box;}
	Body {background: #F5F3F4;
	margin:0;
	padding:10px;
	font-family: ' Open Sans ', Sans-serif;
Text-align:center;
	} h1 {color: #4c4c4c;
	font-weight:600;
border-bottom:1px solid #ccc;
	} h2, h4 {font-weight:400;
Color: #4d4d4d;
	}. card {display:inline-block;
	margin:10px;
	Background: #fff;
	padding:15px;
	min-width:200px;
	box-shadow:0 3px 5px #ddd;
Color: #555;
	} card. box {width:100px;
	height:100px;
	Margin:auto;
	Background: #ddd;
	Cursor:pointer;
box-shadow:0 0 5px #ccc inset;
	} card. box. Fill {width:100px;
	height:100px;
	position:relative;
	Background: #03A9F4;
	Opacity:. 5;
	box-shadow:0 0 5px #ccc;
	-webkit-transition:0.3s;
transition:0.3s;

}. Card p {margin:25px 0 0;}
	. rotate:hover. Fill {-webkit-transform:rotate (45deg);
Transform:rotate (45DEG);
	}. Rotatex:hover. Fill {-webkit-transform:rotatex (45deg);
Transform:rotatex (45DEG); }. Rotatey:hover. Fill {-webkit-trAnsform:rotatey (45DEG);
Transform:rotatey (45DEG);
	}. Rotatez:hover. Fill {-webkit-transform:rotate (45deg);
Transform:rotate (45DEG);
	}. Scale:hover. Fill {-webkit-transform:scale (2, 2);
Transform:scale (2, 2);
	}. Scalex:hover. Fill {-webkit-transform:scalex (2);
Transform:scalex (2);
	}. Scaley:hover. Fill {-webkit-transform:scaley (2);
Transform:scaley (2);
	}. Skew:hover. Fill {-webkit-transform:skew (45deg, 45deg);
Transform:skew (45deg, 45deg);
	}. Skewx:hover. Fill {-webkit-transform:skewx (45deg);
Transform:skewx (45DEG);
	}. Skewy:hover. Fill {-webkit-transform:skewy (45deg);
Transform:skewy (45DEG);
	}. Translate:hover. Fill {-webkit-transform:translate (45px, 1em);
Transform:translate (45px, 1em);
	}. Translatex:hover. Fill {-webkit-transform:translatex (45px);
Transform:translatex (45px);
	}. Translatey:hover. Fill {-webkit-transform:translatey (45px);
Transform:translatey (45px); Matrix:hover. Fill {-webkit-transform:matrix (2, 2,0, 2, 45, 0);
Transform:matrix (2, 2, 0, 2, 45, 0);
	}. perspective-100. box {-webkit-perspective:100px;
perspective:100px;
	}. perspective-200. box {-webkit-perspective:200px;
perspective:200px;
	}. to-100-0-0 {-webkit-transform-origin:100% 0 0;
transform-origin:100% 0 0;
	}. to-0-100-0 {-webkit-transform-origin:0 100% 0;
transform-origin:0 100% 0; }
 
4. CSS3 Animation

@keyframes rule is to create an animation. Specifying a CSS style and animation within a @keyframes rule will gradually change from the current style to the new style. Browser Support

The number in the table represents the first browser version number that supports this property.

The number immediately preceding the-webkit-,-ms-or-moz-is the first browser version number that supports the prefix property.


  
 
 
   
 
    
 
     
 
    
 
    
 
     
@keyframes
 
     
43.0
4.0-webkit-
 
     
10.0
 
     
16.0
5.0-moz-
 
     
9.0
4.0-webkit-
 
     
30.0
15.0-webkit-
12.0-o-
 
    
 
    
 
     
Animation
 
     
43.0
4.0-webkit-
 
     
10.0
 
     
16.0
5.0-moz-
 
     
9.0
4.0-webkit-
 
     
30.0
15.0-webkit-
12.0-o-
 
    
 
   
 

  
 
When you create an animation in @keyframes, bind it to a selector, the animation will not have any effect.

Specifies that at least two CSS3 animated property bindings are directed to a selector:

Specify the name of the animation the animation properties of the time long CSS3


  
 
 
   
 
    
 
     
Property
 
     
Describe
 
     
Css
 
    
 
    
 
     
@keyframes
 
     
Specify the animation.
 
     
3
 
    
 
    
 
     
Animation
 
     
The shorthand property for all animation properties, except for the Animation-play-state property.
 
     
3