Css3:2d and animation

Conversion:

Displacement, scaling, rotation, oblique cut (-webkit-transform)

displacement : When the coordinate origin is not set, a displacement occurs in the upper-left corner of the browser as the origin of the coordinates.

-webkit-transform:translate ();

Zoom : Scale with reference Element center its syntax is as follows

-webkit-transform:scale (. pixels,. pixels);

rotation : Rotation mode: degrees (deg), radians. Rotate by the center of the element. You can also set the coordinates for the element (the vertical direction is the x-axis)

-webkit-transform:rotate (45deg); indicates that the element rotates 45 degrees clockwise around the origin.

You can use the-origin statement to change the reference point of the rotation and reset the origin.

-webkit-transform-origin:x px,y px;

Oblique cut : Also called twist. The x axis is the vertical direction.

-webkit-transform:skew (Xrad,yrad);

Excessive

-webkit-transition:width (over attribute) 4s (over-cycle and time) ease (over-effect type) 2s (delay)

Over type:

• : Linear linear over
• : Ease Smoothing Over
• : Ease-in from slow to fast over
• : Ease-out from fast to slow
• : Ease-in-out from slow to fast to slow

Animation: Animation

@-webkit-keyframes (for troubleshooting browser compatibility issues with Google Chrome for example)

　　

@-webkit-keyframes Myfirst {
0% {
width:150px;
}

30% {
width:300px; /* The percentage of excessive animation and the change of pixels over time, the smaller the pixel changes the more smooth the animation * *
}

50% {
width:500px;
}

100% {
width:600px;
}
}

. div1 {
width:150px; /* For DIV1 define wide-height delay, over-type and loop */
height:150px;
Background-color: #21bbca;
-moz-animation:myfirst 4s ease infinite (infinite loop);
}

　　　

Css3:2d and animation