Css3:3d Conversion

Several breakthroughs: (For more concise understanding, first ignore compatibility)

1. Understanding the coordinate system of 3D

Rotatex ()-----------element rotation around the x-axis

Rotatey ()-----------element rotates around the y-axis

Rotatez ()-----------element rotates around the y-axis

Transform:rotatex (20DEG);

2, perspective perspective, the principle is near large and small, only for the descendants of the elements

perspective:200px;

If you build a cube with a length and width of 100, when perspective<100, it is the equivalent of standing in the box to see, if the perspective is very large is the equivalent of standing in a very far place to see

3. Mobile

TranslateX-----Elements Moving on the x-axis
Translatey-----Elements move on the y-axis
Translatez-----Elements move on the z axis

Transform:translatez (100px);

4, Perspective-origin Point of view, is where the eyes look

perspective-origin:50% 50%;

The Perspective-origin property is not supported by the browser at this time.
Chrome and Safari support alternate-webkit-perspecitve-origin properties.

CSS3 3D Transform's pivot point is in front of the browser!

3. Use

The parent element plus the 3D view declaration, then its descendant elements will have the effect of a

transform-style:preserve-3d;

Css3:3d Conversion