CSS3 2D conversion

CSS3 Conversion

CSS3 transition, we can be moved, scaled, in turn, rotate and stretch elements.

How does it work?

The effect of conversion, so that an element to change the shape, size and position.

You can convert your 2D or 3D elements.

Browser Support

Figures in the table represent the first browser to support the version number of the property.

Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.

Internet Explorer 10, Firefox, and Opera support transform property.

Chrome and Safari requires the prefix -webkit- version.

Note: Internet Explorer 9 requires the prefix -ms- version.

2D conversion

In this chapter you will learn 2D conversion method:

• translate ()
• rotate ()
• scale ()
• skew ()
• matrix ()

In the next chapter you will learn 3D conversion.

Examples

div { transform: rotate (30 deg) ; - Ms-transform: rotate (30 deg) ; / * IE 9 * / - webkit-transform: rotate (30 deg) ; / * Safari and Chrome * / }

try it"

translate () method

translate () method, according to the left (X axis) and the top (Y-axis) position of the given parameter, moves from the current position of the element.

Examples

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

try it"

translate value (50px, 100px) is a mobile element 50 pixels from the left, and moved 100 pixels from the top.

rotate () method

rotate () method, in a given number of degrees in a clockwise rotation of the elements. A negative value is allowed, this is counter-clockwise rotation of the elements.

Examples

div { transform: rotate (30 deg) ; - Ms-transform: rotate (30 deg) ; / * IE 9 * / - webkit-transform: rotate (30 deg) ; / * Safari and Chrome * / }

try it"

rotate value (30deg) elements rotated 30 degrees clockwise.

scale () method

scale () method, which increase or decrease the size of the element, depending on the width (X axis) and height (Y axis) parameters:

Examples

-ms-transform: scale (2,3) ; / * IE 9 * / -webkit-transform: scale (2,3); / * Safari * / transform: scale (2,3); / * Standard syntax * /

try it"

scale (2,3) transition width is twice its original size, and three times the size of its original height.

skew () method

skew () method, the element according to the transverse (X axis) and vertical (Y axis) line parameters for a given angle:

Examples

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

try it"

skew (30deg, 20deg) is an element of the X-axis and Y-axis about 20 degrees around 30 degrees.

matrix () method

matrix () method and the method of converting 2D merged into one.

matrix method has six parameters, including rotation, scaling, moving (panning) and tilt functions.

Examples

The use of matrix () method of rotating 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 * / }

try it"

New conversion property

Following is a list of all conversion properties:

2D conversion method