8.10.4. 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 */
}

8.10.5. 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.

8.10.6. 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.

8.10.7. 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.

8.10.8. 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 */
}

8.10.9. 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 */
}

8.10.10. New conversion attribute ¶

All the transformation attributes are listed below: