3D conversion more than about 2D transform conversion properties, and 3D transform properties as described in Table 1:
Table 1 3D transform properties
3D conversion method as shown in Table 2:
Table 2 3D converting method
1 transform-style
transform-style graphics are often used for converting three-dimensional space coordinate system, here we look at CSS3 set of transform-style 3D deformation properties explain. How to transform-style specified nested elements are rendered in 3D space. There are two main attributes: flat and perserve-3d.
Transform-style attribute syntax is as follows:
transform-style: flat | perserve-3d;
Wherein the value is the default flat, showing all child elements are rendered in the 2D plane. perserve-3d represent all child elements are rendered in 3D space. transform-style property needs to be set in the parent element and any nested above the deformation element.
2 perspective depth of field
depth of field perspective is essential for 3D deformation properties is. This property is set to the position of the viewer, and map the visual content to the cone, and then put into a 2D viewing plane. If you do not specify a perspective, all the Z axis points in space to the same tiling 2D plane, the result will be the depth and transform the concept does not exist. In fact, for property perspective, we can simply understood as a line of sight, and the user to set a distance between the elements of the 3D space plane Z. It is determined by its effect, the smaller the value, the user and the 3D space closer plane distance Z, impressive visual effect; conversely, the larger the value, the user of the 3D spatial plane farther distance Z, the visual effect is less profound .
Syntax perspective attribute is as follows:
perspective: none | <length>;
perspective properties include two attributes: none and have a length value units. Wherein the default attribute is perspective none, it indicates an infinite perspective 3D object, but appears to be planar. Another <length> length unit takes a value greater than zero. And its unit can not as a percentage value. <Length> The larger the value, the farther the angle of emergence, thereby creating a relatively low strength and a very small change in a 3D space. Conversely, the smaller the value, the closer the angle appears to create a high-intensity angle and a large change in 3D.
By following a small case to deepen the impression of what's perspective. code show as below:
There are two div, each div contains a picture. Each div has established 3D space, so the picture about the Y axis 45deg. The difference is that we set the depth of field 600px for the second div, the first not set. View in the browser, operating results shown in Figure 1:
Figure 1 perspective depth of field
From the chart, we can see the difference between two pictures. In the case of a parent node is not set perspective, 3D picture rotation effect is not obvious, but when the parent node is set perspective, the picture only 3D rotation effects.