3 perspective-origin depth of field basis points
Another important attribute of 3D deformation perspective-origin point when the depth of field property, the main source for determining the angle of perspective properties. It actually is provided an X-axis and Y-axis position, by viewing the position of the viewer as if the child elements.
Perspective-origin attribute syntax is as follows:
perspective-origin: tx ty;
The default for this property is "50% 50%", a value may be provided, may be provided two length values. And its value as described in Table 3
TABLE 3 perspective-origin and attribute values described
Like the same perspective, perspective-origin property must be defined in the parent element. Generally perspective-origin property itself does not do anything, it must be defined in a set of attributes on elements of perspective. In other words, perspective-origin property attributes used in conjunction with perspective, in order to move the position of a viewpoint other than the central element.
Again, we passed a small case to deepen the impression of what's perspective-origin. code show as below:
Here we also set up two div, each div contains a picture. Each div has established 3D space, set the depth of field of 600px. The difference is that we changed the second div depth of field point is "left top", the first point using the default depth is "50% to 50%." Viewed in a browser, the operation effect shown in Figure 2:
FIG. 2 perspective-origin point depth
From the chart, we can see the difference between two pictures. Set the depth of field basis point is to change the location to view the 3D changes.
4 3D displacement
In the 3D displacement CSS3 includes two main function translateZ () and translate3d (). translate3d () function allows a moving element in three-dimensional space. This deformation is characterized by the use of three-dimensional vector coordinates define the number of elements moving in each direction. The basic syntax is as follows:
translate3d(tx,ty,tz)
And its property values described in Table 4:
Table 4 translate3d (tx, ty, tz) and the attribute value Value Description
With the view of a simple example, a deeper understanding of translate3d () code is as follows:
Here we use for the second image translate3d () method, it shifted relative to the previous position, 10px laterally offset, longitudinally offset 10px, Z-axis displacement amount of vinylidene -100px. Viewed in a browser, the operation effect shown in Figure 3:
FIG 3 translate3d () 3D displacement
From the chart, we can see the difference between two pictures. FIG second displacement changed, the offset to the right 10px, 10px shifted downwardly, rearwardly offset 100px.
In addition to displacement in CSS3 3D translate3d () function has the outside translateZ () function. translateZ () function is the function to let an element is displaced along the Z axis in 3D space, using the basic syntax is as follows:
translateZ(t)
t refers to the length of the Z-axis vector displacement.
Use translateZ () function so that elements can be shifted in the Z-axis, when it is negative, an element in the Z-axis shift farther, resulting in the elements becomes smaller. Conversely, when it is positive, the element in the Z-axis closer, resulting in the element becomes larger. It will replace the translateZ translate3d Example CSS code () method () method, as follows:
Here we use translateZ second images () method, Z-axis displacement amount of vinylidene -100px. Viewed in a browser, the operation effect shown in Figure 4:
FIG 4 translate3d () 3D displacement
translateZ () function so that only the element is displaced in the Z axis, in practical use is equivalent to translate3d (0,0, tz).