CSS3 2D conversion

CSS3 conversion

CSS3 transformations can move, scale, rotate, lengthen, or stretch elements.

How does it work?

The effect of the transformation is to change the shape, size and position of an element.

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

Move your mouse over the following elements to see the conversion effects of2D and 3D:

2D conversion

3D conversion

Browser support

The number in the table represents the first browser version number that supports the property.

The number immediately before-webkit-,-ms- or-moz- is the first browser version number that supports the prefix attribute.

Internet Explorer 10, Firefox, and Opera support the transform attribute.

Chrome and Safari require a prefix-webkit- version.

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

2D conversion

In this chapter you will learn about 2D transformation methods:

• translate()

• rotate()

• scale()

• skew()

• matrix()

You will learn about 3D conversion in the next chapter.

Example

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

translate() method

translate() method to move from the current element position based on the parameters given by the left (X axis) and top (Y axis) positions.

Example

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

translate the value (50pxmeary 100px) moves 50 pixels from the left element and 100 pixels from the top.

rotate() method

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

Example

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

rotate value (30deg) element rotates 30 degrees clockwise.

Scale () method

scale() method, the size that the element increases or decreases dependson the parameters of the width (X axis) and height (Y axis):

Example

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

Scale (2) the transition width is 2 times its original size and its height is 3 times its original size.

skew() method

transform:skew(<angle> [,<angle>]);

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

matrix() method

matrix() method and 2D transformation method are merged into one.

matrix the method has six parameters, including rotation, scaling, moving (translation), and tilting functions.

Example

Utilization matrix() method 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 attribute

All the transformation attributes are listed below: