CSS3 3d effects and animation learning

CSS Reference Manual:

http://www.phpstudy.net/css3/

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

Render 3d Effect:
-webkit-transform-style:preserve-3d;

Perspective Distance:
-wenkit-perspective:300;

Perspective:
-webkit-perspective-origin:25% 75%;/* Digital Positive or negative * *

Rotation and Transformation:
Transform:translatex ( -90px) translatez (90px) Rotatey (90deg);
/*rotatex rotation x-axis,rotatey rotation y-axis ,Rotatez rotation z-axis
translateX,translatey,translatez move on the XYZ axis
Scalez (sz) Z-axis Scaling
*/


Rotate the page to set the Position:absolute first, leaving it out of the document FLOW.


Animation effect:
animation/* shorthand property, used to set the Animation. */
-webkit-transform-origin:90px 90px 90px;/* Set rotation datum */
@keyframes/* Animate */

CSS3 3d effects and animation learning