CSS3 Tutorial -2d Conversion

Front-end development of small partners, you know how CSS3 in the CSS3 tutorial to achieve the 2d,3d rotation of the div? This process is a very interesting process, you may wish to learn.

CSS3 Conversion:

With CSS3 conversion, we are able to move, scale, rotate, lengthen, or stretch elements.

So how does it work?

Transformations are an effect that changes the shape, size, and position of an element.

You can use 2D or 3D transformations to transform your elements.

Browser support:

Internet Explorer 10, Firefox, and Opera support the Transform property.

Chrome and Safari need a prefix of-webkit-.

Note: Internet Explorer 9 requires a prefix of-ms-.

Conversion:

In this chapter, you will learn the following 2D conversion methods:

Translate ();

Rotate ();

Scale ();

Skew ();

Matrix ().

Instance:

Div{transform:rotate (30deg);-ms-transform:rotate (30deg);/* IE 9 */-webkit-transform:rotate (30DEG);/* Safari and CHRO Me */-o-transform:rotate (30deg); /* Opera */-moz-transform:rotate (30deg); /* Firefox */}

Translate () Method:

The translate () method moves from the current element position according to the parameters given at the left (x-axis) and top (Y-axis) positions.

Instance:

Div{transform:translate (50px,100px);-ms-transform:translate (50px,100px);/* IE 9 */-webkit-transform:translate ( 50px,100px); /* Safari and Chrome */}

The Translate value (50px,100px) is a 50 pixel move from the left element and 100 pixels from the top.

Rotate () Method:

The rotate () method rotates the element clockwise in a given degree. Negative values are allowed so that the elements are rotated counterclockwise.

Instance:

Div{transform:rotate (30deg);-ms-transform:rotate (30deg);/* IE 9 */-webkit-transform:rotate (30DEG);/* Safari and CHRO Me */}

The Rotate value (30deg) element rotates 30 degrees clockwise.

Scale () Method:

The scale () method, which increases or decreases the size of the element, depends on the width (x-axis) and height (y-axis) parameters:

Instance:

Div{transform:scale (2,4);-ms-transform:scale (2,4);/* IE 9 */-webkit-transform:scale (2,4);/* Safari and Chrome */}

The scale (2,4) transition width is twice times the original size, and its original size is 4 times times the height.

Skew () Method:

The skew () method, which is given an angle based on the horizontal (x-axis) and vertical (Y-axis) line parameters:

Instance:

Div{transform:skew (30deg,20deg);-ms-transform:skew (30deg,20deg);/* IE 9 */-webkit-transform:skew (30DEG,20DEG);/* Safari and Chrome */}

Skew (30DEG,20DEG) is a 20-degree 30-degree element around the x-axis and the y-axis.

Matrix () Method:

The matrix () method and the 2D transform method are combined into one.

The matrix method has six parameters, including rotation, zoom, move (pan), and tilt.

Instance:

Use the Matrix () method to rotate the div element 30°

Div{transform:matrix (0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix (0.866,0.5,-0.5,0.866,0,0);/* IE 9 */- Webkit-transform:matrix (0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */}

New Conversion Properties:

All of the conversion properties are listed below:

Conversion method:

The above is the CSS3 tutorial -2d conversion content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

