The Transform property in C33

The Transform property of CSS3

1. Rotation:

650) this.width=650; "src=" Http://www.wzsky.net/img/uploadimg/20120312/1008380.png "width=" 148 "height=" 148 "alt=" 1008380.png "/>

Transform:rotate (45DEG);

The statement rotates the DIV element 45 degrees clockwise. DEG is an angular unit defined in the "Values and Units" module of CSS 3

2. Zoom:

Transform:scale (0.8,1);

Use the Zoom method to achieve the zoom effect of the text or image, specifying the magnification in the parameters. The statement uses the scale method to reduce the element horizontally by 20%, without scaling in the vertical direction.

3. Tilt:

650) this.width=650; "src=" Http://www.wzsky.net/img/uploadimg/20120312/1008382.png "width=" 173 "height=" "alt=" 1008382.png "/>

Transform:skew (30DEG,0DEG);

In this example, the skew method is used to tilt the element horizontally to 30 degrees and the disposition direction remains unchanged.

4. Move:

650) this.width=650; "src=" Http://www.wzsky.net/img/uploadimg/20120312/1008383.png "width=" "height=" and "alt=" 1008383.png "/>

Translate (50px,50px);

Use the Translate method to move text or images vertically, horizontally and vertically, 50 pixels in vertical direction

5. Set the base point for the deformation:

650) this.width=650; "src=" Http://www.wzsky.net/img/uploadimg/20120312/1008384.png "width=" 148 "height=" 175 "alt=" 1008384.png "/>

When you use the Transform method to deform a text or an image, the center point of the element is the datum point. Using the Transform-orign property, you can change the datum point of the deformation.

Transorm-origin:left Bottom;

Left and bottom are the positions of the datum points in the horizontal and vertical directions of the element.

6.

Use multiple transformation methods on an element

650) this.width=650; "src=" Http://www.wzsky.net/img/uploadimg/20120312/1008385.png "width=" 275 "height=" 269 "alt=" 1008385.png "/>

Transform:rotate (45deg) scale (1.5) translate (50px,0px);

Definition and usage

The Transform property applies a 2D or 3D conversion to an element. This property allows us to rotate, scale, move, or skew elements

Rotate (angle) defines 2D rotation, which specifies the angle in the parameter

Rotatex (angle) defines a 3D rotation along the X-axis.

Rotatey (angle) defines a 3D rotation along the Y-axis.

Rotatez (angle) defines a 3D rotation along the Z-axis.

Scale (x, y) defines the 2D scaling transformation.

Scale3d (x, y, z) defines a 3D scaling transformation.

ScaleX (x) defines the zoom transformation by setting the value of the x-axis.

ScaleY (y) defines the zoom transformation by setting the value of the y-axis.

Scalez (z) defines the 3D scaling transformation by setting the value of the z-axis.

The Transform property in C33