Css3 3d effects and animation learning, css33d effects Animation

Css3 3d effects and animation learning, css33d effects Animation

Css Reference Manual:

Http://www.phpstudy.net/css3/

Http://www.css88.com/book/css/

 

3d effects:
-Webkit-transform-style: preserve-3d;

Perspective distance:
-Wenkit-perspective: 300;

Perspective:
-Webkit-perspective-origin: 25% 75%;/* both positive and negative numbers */

Rotation and Transformation:
Transform: translatex (-90px) translatez (90px) rotatey (90deg );
/* RotateX rotates the X axis, rotateY rotates the Y axis, and rotateZ rotates the Z axis.
TranslateX, translateY, and translateZ move on the XYZ axis
ScaleZ (sz) zooming
*/


To rotate a page, you must first set position: absolute to disallow it from the document stream.


Animation effect:
Animation/* is short for setting animations. */
-Webkit-transform-origin: 90px 90px 90px;/* set the rotation datum point */
@ Keyframes/* Set animation */