CSS 2D Transforms

2D transforms allow you to move, rotate, scale, and skew HTML elements.

The transform property creates the transformations.

The property values are functions, such as translate, scale, and rotate.

Example

#

This element is rotated using a transform.
Hover over the element to see it rotate back.

This element is rotated by 15 degrees
<style>
  .transform {
    background-color: aliceblue;
    border: 1px solid #555;
    padding: 15px;
    margin: 45px 0 35px 0;
    width: 250px;
    transform: rotate(15deg);
  }

  .transform:hover {
    transform: none;
    cursor: pointer;
  }
</style>

<div class="transform">
  This element is rotated by 15 degrees
</div>

Using 2D transforms

#

The values of the transform property are functions.

Here is a list of the available 2D transformation functions.

Function Description
matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values
translate(x,y) Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n) Defines a 2D translation, moving the element along the X-axis
translateY(n) Defines a 2D translation, moving the element along the Y-axis
scale(x,y) Defines a 2D scale transformation, changing the element's width and height
scaleX(n) Defines a 2D scale transformation, changing the element's width
scaleY(n) Defines a 2D scale transformation, changing the element's height
rotate(angle) Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle) Defines a 2D skew transformation along the X-axis
skewY(angle) Defines a 2D skew transformation along the Y-axis

The translate function

The translate function moves an element along the x and y-axis.

This example has a standard element and a translated element.

A standard element
A translated element
<style>
  .standard {
    background-color: aliceblue;
    border: 1px solid black;
    width: 300px;
    padding: 25px;
  }

  .standard.translate {
    transform: translate(50px, 40px);
  }
</style>

<div class="standard">
  A standard element
</div>

<div class="standard translate">
  A translated element
</div>

The scale function

The scale function resizes an element along the x- and y-axis.

This example has a standard element and a scaled element.

The scaled element has expanded horizontally and is compressed vertically.

A standard element
A scaled element
<style>
  .standard {
    background-color: aliceblue;
    border: 1px solid black;
    width: 300px;
    padding: 25px;
  }

  .standard.scale {
    transform: scale(1.1, .9);
  }
</style>

<div class="standard">
  A standard element
</div>

<div class="standard scale">
  A scaled element
</div>

The rotate() method

The rotate function rotates an element by a specified angle.

An element can be rotated clockwise or counter-clockwise.

This example has a standard element and a rotated element.

A standard element
A rotated element.
<style>
  .standard {
    background-color: aliceblue;
    border: 1px solid black;
    width: 300px;
    padding: 25px;
    margin-top: 20px;
  }

  .standard.rotate {
    transform: rotate(20deg);
  }
</style>

<div class="standard">
  A standard element
</div>

<div class="standard rotate">
  A rotated element.
</div>

The skew() method

The skew function skews an element along the x and y-axis.

This example has a standard element and a skewed element.

A standard element
A skewed element
<style>
  .standard {
    background-color: aliceblue;
    border: 1px solid black;
    width: 300px;
    padding: 25px;
    margin-top: 20px;
  }

  .standard.skew {
    transform: skew(-35deg, -5deg);
  }
</style>

<div class="standard">
  A standard element
</div>

<div class="standard skew">
  A skewed element
</div>

2D Transform Properties

The table below are the properties used for 2D transform.

Property Description
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements

Browser support for 2D Transforms

This table shows when 2D transforms support started for each browser.

Chrome
36.0 Jul 2014
Firefox
16.0 Oct 2012
IE/Edge
11.0 Oct 2013
Opera
23.0 Jul 2013
Safari
9.0 Sep 2015

You may also like

Guides