"HTML5" 3D cube rotation

　　Http://www.787866.com/2083.html

In order to achieve the 3D effect, it is very simple, just specify an element as a container and set transform-style:preserve-3d, then its descendants will have the effect of the element. But there are a lot of things to be aware of, here is the way I learn, the process of sharing to everyone. Before the knowledge point, or the first to understand the 3D coordinate system, from the web search a classic coordinate system diagram, for everyone to review.

1.3D attempts to

　Transform-style:flat (default, two-dimensional effect)/preserve-3d (three-dimensional effect). Sets the transform-style:preserve-3d of an element, affecting only the child elements of the element (if the grandchild element also has a 3d effect, you must also set preserve-3d for the child element). This allows all child elements to perform a 3d warp operation relative to the plane of the parent element. As with two-dimensional deformations, three-dimensional transformations can be set using the Transform property. Element variants can be made by a function or by a three-dimensional matrix. List several functions:

Translate3d (x, y, z) enables elements to be moved in these three latitudes or separately, such as: TranslateX (length), Translatey (length), Translatez (length). Note that the z-axis value can only be px;

Scale3d (Number,number,number) enables the element to be scaled in these three latitudes, and can also be written separately, such as: ScaleX (), ScaleY (), ScaleY ().

Rotatex (angle) is the element that rotates in accordance with the X axis;

Rotatey (angle) is the element rotates in accordance with the y-axis;

Rotatez (angle) is the element that rotates in accordance with the z axis.

2. Perspective/depth of field effect

Perspective (length) sets the distance of a three-dimensional perspective for an element. only for the descendants of the element, not its element itself. when perspective:none/0, the equivalent is not set to perspective (length). For example, you want to build a small cube, the length and width of the height are 200px. If your perspective < 200px, that is equivalent to stand in the box to see the results, if perspective very large that is standing in a very far place to see (the cube has become a small square).

When the element is not set perspective (length) , all descendant elements are compressed on the same two-dimensional plane, without the effect of depth of field. If you set perspective (length) , you will see a three-dimensional effect. The default perspective center is at the midpoint of the container (the element where the perspective is located, not his descendant element), which is perspective-origin:50% 50%. Of course you can also set your own, such as: Upper left corner-webkit-perspective-origin:0px 0px;.

Combined with the above two points, we can use a few examples to gain insight into the next perspective (length); and transform-style:preserve-3d;

(1) when perspective (length) is set, no transform-style:preserve-3d is set, and when the element is stationary, there is a three-dimensional effect:

(2) When setting perspective (length); do not set transform-style:preserve-3d; the effect when the element is rotated:

　　　　　　

(3) When the transform-style:preserve-3d is set, the perspective (length) is not set, and there is no stereoscopic effect when the element is stationary.

(4) When setting perspective (length); do not set transform-style:preserve-3d; the effect when the element is rotated:

(5) only if two values are set, whether it is static or rotation, you will see the effect of three-dimensional.

Note:(1) If an element rotates more than 90 degrees on the x-axis or the y-axis, the back of it will be user-facing. The elements on the back are always transparent, so the user sees a positive reverse pattern from behind, like a sign posted from behind the glass door. To prevent the front of the mirror from appearing. The backface-visibility can be set to hidden; if Backface-visibility:hidden; Then this element will not be visible on the back. One reason to do this is to think of an element that has two faces, like a poker. For example: To create a poker, the front and back must be different, the position of the two faces of the two sides. These two elements are rotated together, the front side is gradually reversed and hidden, while the back is reversed and appears. if the element on the back is visible, it will mask the element underneath it when rotated, rather than exposing the element underneath it.

　　　(2) If the parent element is set to Overflow:hidden, then the child element cannot jump out of the parent element's plane, and the 3D effect cannot occur. Just like, Transform-style:flat;

"HTML5" 3D cube rotation