Example HTML5, CSS3 realize 3D conversion effect

In the CSS two-dimensional world, we can set the element width height, position, rotation, background and so on. In the CSS three-dimensional world, a z-axis is extended, which is perpendicular to the screen and points out. The following article mainly introduces the use of HTML5+CSS3 to achieve 3D conversion effect of relevant information, the need for friends can refer to, hope to help everyone.

First, let's look at the coordinate system of 3d, the x-axis is horizontal on the screen, the Y axis is vertical, and the z axis is perpendicular to the screen orientation.

If you don't understand it, you can refer to the Z-index property of the positional attribute, which in a sense is to move the element in the z axis.

In the 2d conversion module we studied the Rotatex () and the Rotatey () method, that is, the x-axis and the y-axis rotation, which is actually a 3d module performance, of course, to see the nearly large and small 3d effect, but also need to add a perspective property on the parent element: transform: Perspective (500px); value is the distance from the perspective point to the element, the specific concept of the art perspective teaching ....

More useless, on the code:

<! DOCTYPE html>
：


However, you will find that when the parent element goes to 90 degrees, the element disappears, which means that the element has no thickness. The description element, although it has a nearly large and small perspective properties, is still essentially 2d.

This is what you need to add the transform-style:preserve-3d; style to let the element be converted in 3d space. In this way, the element is in the 3-dimensional space, and when the parent element rotates 90 degrees, it can still see the child elements inside.

Example code:

<! DOCTYPE html>
：

　　

Above, we have a preliminary understanding of the 3d conversion module, below we do a cube, to organize the knowledge of the 3d module.

Step by step to do the writing too much trouble, I will write the process in the code of the comments, the small friends please forgive me.

Code:

<!     DOCTYPE html>
：


This method is better understood, after understanding, please look at the next.

The code is below:

<!    DOCTYPE html>
：


This writing, as long as the understanding, it will be more convenient to write, and do not have to consider the conversion of the wrong angle will lead to the content is reversed, so recommend this kind of wording. Of course, this notation is rotated along the x-axis and the y-axis, which also causes the inversion of the content.