CSS 2D transformations

CSS 2D transformations

Course Recommendation:

CSS transformations (transforms) allow you to move, rotate, scale, and skew elements.

Hover over the following element to view 2D transformations:

2D rotate

  • transform

In this chapter, you will learn the following CSS properties:

Browser Support

Property The numbers in the table indicate the first browser version that fully supports this property. Chrome IE Firefox Safari
transform Opera 36.0 10.0 16.0 9.0

CSS 2D Transformation Method

23.0 transform By using CSS

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

Properties, you can use the following 2D transformation methods:Tip:

In the next chapter, you will learn 3D transformations.

Translate

translate() method translate()

The method moves an element from its current position (based on the parameters specified for the X and Y axes).

Example

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

Try It Yourself

transform: translate(50px, 100px);

Rotate

rotate() method rotate()

The method rotates an element clockwise or counterclockwise based on the given angle.

Example

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

Try It Yourself

transform: rotate(20deg);

Use a negative value to rotate an element counterclockwise.

Example

div {
  The following example rotates the <div> element counterclockwise by 20 degrees:
}

Try It Yourself

transform: rotate(-20deg);

Scale

scale() method scale()

The method increases or decreases the size of an element (based on the given width and height parameters).

Example

div {
  The following example increases the <div> element to twice its original width and three times its original height:
}

Try It Yourself

The following example reduces the <div> element to half of its original width and height:

Example

div {
  transform: scale(0.5, 0.5);
}

Try It Yourself

scaleX() method

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

The following example increases the <div> element to twice its original width:

Example

div {
  transform: scaleX(2);
}

Try It Yourself

The following example reduces the <div> element to half of its original width:

Example

div {
  transform: scaleX(0.5);
}

Try It Yourself

scaleY() Method

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

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

Example

div {
  transform: scaleY(3);
}

Try It Yourself

The following example reduces the <div> element to half its original height:

Example

div {
  transform: scaleY(0.5);
}

Try It Yourself

skewX() Method

skewX() The method makes the element skew by the given angle along the X axis.

The following example makes the <div> element skew 20 degrees along the X axis:

Example

div {
  transform: skewX(20deg);
}

Try It Yourself

skewY() Method

skewY() The method makes the element skew by the given angle along the Y axis.

The following example makes the <div> element skew 20 degrees along the Y axis:

Example

div {
  transform: skewY(20deg);
}

Try It Yourself

skew() Method

skew() The method makes the element skew by the given angle along the X and Y axes.

The following example makes the <div> element skew 20 degrees along the X axis and 10 degrees along the Y axis:

Example

div {
  transform: skew(20deg, 10deg);
}

Try It Yourself

If the second parameter is not specified, the value is zero. Therefore, the following example makes the <div> element skew 20 degrees along the X axis:

Example

div {
  transform: skew(20deg);
}

Try It Yourself

matrix() Method

Rotate

matrix() The method combines all 2D transformation methods into one.

matrix() The method accepts six parameters, including mathematical functions, which allow you to rotate, scale, move (translate), and skew the element.

The parameters are as follows: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Example

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

Try It Yourself

CSS Transformation Properties

The following table lists all 2D transformation properties:

Property Description
transform Apply a 2D or 3D transformation to the element.
transform-origin Allows you to change the position of the transformed element.

CSS 2D Transformation Method

Function Description
matrix(n,n,n,n,n,n) Define a 2D transformation using a matrix of six values.
translate(x,y) Define a 2D transformation, moving the element along both the X and Y axes.
translateX(n) Define a 2D transformation, moving the element along the X axis.
translateY(n) Define a 2D transformation, moving the element along the Y axis.
scale(x,y) Define a 2D scale transformation, changing the width and height of the element.
scaleX(n) Define a 2D scale transformation, changing the width of the element.
scaleY(n) Define a 2D scale transformation, changing the height of the element.
rotate(angle) Define a 2D rotation, specifying the angle in the parameters.
skew(x-angle,y-angle) Define a 2D skew transformation along both the X and Y axes.
skewX(angle) Define a 2D skew transformation along the X-axis.
skewY(angle) Define a 2D skew transformation along the Y-axis.