CSS 2D Transform

CSS 2D Transform is used to change the structure of an element. You can change the shape, size and position of an element using 2D transform. Here are some common values which are used in 2D transforms:

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

The translate() Method

The translate() method is used to move the element from its actual position to along the X-axis and Y-axis.

Example:

The rotate() Method

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

Example:

You have to use negative values to rotate the element counter-clockwise.

Example:

The scale() Method

The scale() method is used to increase or decrease the size of an element according to the parameter given for the width and height. The given example increases the element two times of its actual width, and three times of its actual height:

Example:

The skewX() Method

The skewX() method is used to skew an element in the given angle along the X-axis.

Example:

The skewY() Method

The skewY() method is used to skew an element in the given angle along the Y-axis.

Example:

The skew() Method

The skew() method is used to skew an element in the given angle along the X-axis and the Y-axis. The following example skews the element 20 degrees along the X-axis, and 10 degrees along the Y-axis:

Example:

The matrix() Method

The matrix() method combines all the 2D transform property into a single property. The matrix transform property accepts six parameters are as follow: matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

Example: