CSS Transforms

CSS3 supports transform property. This transform property facilitates you to translate, rotate, scale, and skews elements.

Transformation is an effect that is used to change shape, size and position.

There are two type of transformation i.e. 2D and 3D transformation supported in CSS3.


CSS 2D Transforms

The CSS 2D transforms are used to re-change the structure of the element as translate, rotate, scale and skew etc.

Following is a list of 2D transforms methods:

  • translate(x,y): It is used to transform the element along X-axis and Y-axis.
  • translateX(n): It is used to transform the element along X-axis.
  • translateY(n): It is used to transform the element along Y-axis.
  • rotate(): It is used to rotate the element on the basis of an angle.
  • scale(x,y): It is used to change the width and height of an element.
  • scaleX(n): It is used to change the width of an element.
  • scaleY(n): It is used to change the height of an element.
  • skewX(): It specifies the skew transforms along with X-axis.
  • skewY():It specifies the skew transforms along with Y-axis.
  • matrix(): It specifies matrix transforms.

Supporting browsers

Property chrome browser Chrome ie browser IE firefox browser Firefox opera browser Opera safari browser Safari
transform
36.04.0 -webkit-
10.09.0 -ms-
16.03.5 -moz-
23.0
15.0 -webkit-
12.1
10.5 -o-
9.03.2 -webkit-
transform-origin
(two-value syntax)
36.0
4.0 -webkit-
10.0
9.0 -ms-
16.03.5 -moz-
9.03.2 -webkit-
23.0
15.0 -webkit-
12.110.5 -o-

The translate() method

The CSS translate() method is used to move an element from its current position according to the given parameters i.e. X-axis and Y-axis.

Let's take an example to translate a

element 50 pixels right, and 100 pixels down from its current position.

See this example:

Test it Now

The rotate() method

The CSS rotate() method is used to rotate an element clockwise or anti-clockwise according to the given degree.

Let's take an example to rotate a

element by 300.

See this example:

Test it Now

The scale() method

The CSS scale() method is used to increase or decrease the size of an element according to the given width and height.

Let's take an example to increase the size of an

element by increasing its width and height two times.

strong>See this example:

Test it Now

The skewX() method

The CSS skewX() method is used to skew an element along the X axis according to the given angle. Let?s take an example to skew an

element 30 degrees along the X-axis.

See this example:

Test it Now

The skewY() method

The CSS skewY() method is used to skew an element along the Y axis according to the given angle. Let's take an example to skew an

element 30 degrees along the Y-axis.

See this example:

Test it Now

The skew() method

The CSS skew() method is used to skew an element along with X-axis and Y-axis according to the given angle.

Let's take a

element and skew it 30 degree along the X-axis and 20 degree along the Y-axis.

See this example:

Test it Now

The matrix() method

The CSS matrix() method combines all the six 2D transform methods altogether. It allows you to rotate, scale, translate, and skew elements.

Syntax:

The parameters of matrix method: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

See this example:


Test it Now
Next TopicCSS 3D Transforms




Contact US

Email:[email protected]

CSS 2D Transforms
10/30