CSS 2D Transforms

CSS transforms allow you to move, rotate, scale, and skew elements.
Mouse over the element below to see a 2D transformation:

In this chapter you will learn about the following CSS property:

• transform

---

CSS 2D Transform Functions

With the CSS transform property you can use the following 2D transformation functions:

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

---

The translate() Function

Translate:

The translate() function moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

The following example moves the <div> element 50 pixels to the right, and 100 pixels down from its current position:

Output :

The rotate() Function

The rotate() function rotates an element clockwise or counter-clockwise according to a given degree.

The following example rotates the <div> element clockwise by 20 degrees:

Output :

The scale() Function

The scale() function increases or decreases the size of an element (according to the parameters given for the width and height).

The following example increases the <div> element to be two times its original width, and three times its original height:

Output 3:

The scaleX() Function

The scaleX() function increases or decreases the width of an element.

The following example increases the <div> element to be two times its original width:

Output :

The scaleY() Function

The scaleY() function increases or decreases the height of an element.

The following example increases the <div> element to be three times its original height:

Output:-:

The skewX() Function

The skewX() function skews an element along the X-axis by the given angle.

The following example skews the <div> element 20 degrees

Output:-:

The scaleY() Function

The scaleY() function increases or decreases the height of an element.

The following example increases the <div> element to be three times its original height:

Output:-:

The matrix() Function

Rotate & Transform (Advanced):

The matrix() function combines all the 2D transform functions into one.

It takes six parameters and allows you to apply a combination of scaling, skewing, translation, and rotation.

Syntax:

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

The following example uses matrix(1, 0.3, 0.5, 1, 30, 20):

Output:-: