5 3D rotation
In the three-dimensional deformation, we can make rotation element in any axis. To this end, CSS3 added three rotation function: rotateX (), rotateY () and rotateZ (). Use rotateX () function allows the element to rotate about an axis X; rotateY use () function allows the element to rotate about a Y-axis; rotateZ use () function allows the element to rotate about a Z-axis;
rotateX () function element specifies a rotation about the X axis, is defined as the amount of rotation angle designated; if the value is positive, clockwise rotation of the element about the axis X; conversely, if the value is negative, counterclockwise around the X axis elements rotation. The basic syntax is as follows:
rotateX(a)
Where, a rotation angle refers to a value, which value can be positive or negative.
rotateY () function specifies an element of rotation about the Y axis, is defined as the amount of rotation angle designated; if the value is positive, clockwise rotation of the element about the axis Y; on the contrary, if the value is negative, about the Y axis counterclockwise element rotation. The basic syntax is as follows:
rotateY(a)
Where, a rotation angle refers to a value, which value can be positive or negative.
rotateZ () function and the other functions of the same two functions, except that rotateZ () function specifies an element rotating about the Z axis. The basic syntax is as follows:
rotateZ(a)
rotateZ () function specified element about the Z axis, if only a visual point of view, rotateZ () function so that elements rotated clockwise or counterclockwise, and effect, and rotate () the same effect, but it is not in the 2D plane of rotation.
With the view of a simple example, a deeper understanding of rotate () function, as follows:
Here we let the first picture rotation about the X axis 30deg, 30deg second picture rotation about the Y axis, and the third picture rotate 30deg around the Z axis. Viewed in a browser, the operation effect shown in Figure 5:
FIG 5 rotate () 3D rotation
6 3D Zoom
CSS3 3D deformation scaling scaleZ main () and Scale3D () function of two kinds, when the X-axis and Y-axis Scale3D () simultaneously is 1, i.e. scale3d (1,1, sz), which is equivalent to the effect scaleZ ( sz). By using the 3D scaling function, the scaling element where the Z-axis. The default value is 1, when the value is greater than 1, amplifying elements; otherwise less than 1 greater than 0.01, narrow elements. Use the following syntax:
scale3d (sx, sz)
property values and the scale described in Table 5:
Table 5 scale () and the attribute value Value Description
2D scaling function scale (sx, sy), capable of lateral and vertical scaling elements. 3D multi-scaling conversion of a Z axis. With scaleZ () function implemented in the Z-axis scaling element, using the following syntax:
scaleZ(s)
S specified proportion of each element in the Z-axis point. With the view of a simple example, a deeper understanding of scaleZ () function, as follows:
Here we let the first image rotation about the Y axis 30deg, 30deg second image rotation about the Y axis and enlarged three times. Viewed in a browser, the operation effect as shown in Figure 6:
FIG 6 scaleZ () 3D scaling
7 3D box
As used herein, 3D conversion properties and methods to construct 3D surface 6 of a box, the box is a cube. code show as below:
This construct a 3D box, the front is 3. When the mouse moves into the box, so the box 360deg rotation about the X axis, in order to allow readers to clearly see the process of rotating the box, we have added a transition for the box. The following is a random rotation of the screenshot shown in Figure 7:
FIG 7 3D box