CSS 2D Transforms

CSS3 provides the facility to change shape, size, and position of the element with the help of transform property. There are two types of transformations namely, 2D and 3D.

Transformation allows to rotate, translate, scale, and skew elements.

In this, we will learn about only 2D transformation.

In the 2D transformation, the effects are produced with the help of x-axis (horizontal effects) and y-axis (vertical effects).

The list of 2D transformations methods are as follows:

Translate

  1. translate(X, Y) – This method transforms the element along x-axis and y-axis.
  2. translateX(X) – This method transforms the element along x-axis.
  3. translateY(Y) – This method transforms the element along y-axis.

These methods take values as lengths and percentages. The default value is 0.

Rotate

  1. rotate(X, Y) – This method rotates the element along x-axis and y-axis.
  2. rotateX(X) – This method rotates the element along x-axis.
  3. rotateY(Y) – This method rotates the element along y-axis.

These methods take values as angles. The default value is 0.

The positive value represents clockwise rotation and the negative value represents anti-clockwise direction.

Run

Scale

  1. scale(X, Y) – This method changes the height and width of the element.
  2. scaleX(X) – This method changes the width of the element.
  3. scaleY(Y) – This method changes the height of the element.

Skew

  1. skew(X, Y) – This method distorts the element along x-axis and y-axis.
  2. skewX(X) – This method distorts the element along x-axis
  3. skewY(Y) – This method distorts the element along y-axis.

These methods take values as angles.

Matrix

The matrix method combines the 2D transform methods to be applied as one. 

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

The transform properties supported in 2D transformations are –

  1. transform : Applies effect to an element 
  2. transform-origin : Allows to change the position