CSS transform Property

The transform property adds a transformation to an element.

This property allows you to rotate, scale, move, or skew elements.

It does this by modifying the coordinates of the elements.

Example

#

A transformed (rotated) <div> element.

Rotated 30 degrees
<style>
  .transform {
    width: 200px;
    height: 100px;
    padding: 15px;
    margin: 60px;
    background-color: firebrick;
    color: white;
    transform: rotate(30deg);
  }
</style>

<div class="transform">
  Rotated 30 degrees
</div>

Using transform

The transform property allows you to rotate, scale, move, or skew elements.

Elements that adhere to the CSS box model are transformable, with some exceptions.

Exceptions include table cells, inline boxes, and table column groups.

Syntax

transform: none | transform-functions | 
           initial | inherit;

Values

#

These are the 2-dimensional transforms.

Value Description
none No transformation
translate(x,y) 2D translation along the X- and the Y-axis
translateX(x) 2D translation along the X-axis
translateY(y) 2D translation along the Y-axis
scale(x,y) 2D scale transformation along the X- and the Y-axis
scaleX(x) 2D scale transformation along the X-axis
scaleY(y) 2D scale transformation along the Y-axis
rotate(angle) 2D rotation by a specified angle
skew(x-angle,y-angle) 2D skew transformation along the X- and the Y-axis
skewX(angle) 2D skew transformation along the X-axis
skewY(angle) 2D skew transformation along the Y-axis
matrix(n,n,n,n,n,n) 2D transformation, using a matrix of six values
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Next are the 3-dimensional transforms.

Value Description
translate3d(x,y,z) 3D translation along the X-, Y-, and Z-axis
translateZ(z) 3D translation along the Z-axis
scale3d(x,y,z) 3D scaling along the X-, Y-, and Z-axis
scaleZ(z) 3D scale transformation along the Z-axis
rotate3d(x,y,z,angle) 3D rotation
rotateX(angle) 3D rotation along the X-axis
rotateY(angle) 3D rotation along the Y-axis
rotateZ(angle) 3D rotation along the Z-axis
perspective(n) Perspective view for a 3D transformed element
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 3D transformation, using a 4x4 matrix of 16 values

More Examples

Click the buttons to see the different transform values.

Transformed element
<style>
  .transform-example {
    width: 200px;
    height: 100px;
    margin: 100px;
    text-align: center;
    padding-top: 35px;
    background-color: crimson;
    color: white;
    transition: transform 1s ease .2s;
    transform: rotate(30deg);
  }
</style>

<div class="transform-example">
  Transformed element
</div>

Did you know?

Did you know?

Combining transform functions

A single transformation can can have multiple transformation functions.
The text below is scaled, rotated, and skewed.

TEXT
<style>
  .transform-multiple {
    color: firebrick;
    font-family: sans-serif;
    font-size: 18px;
    display: inline-block;
    transform: scale(5) rotate(-25deg) skewX(-25deg);
    margin: 100px;
  }
</style>

<div class="transform-multiple">TEXT</div>

Browser support

This table shows when transform support started for each browser.

Chrome
36.0
Firefox
16.0
IE/Edge
10.0
Opera
23.0
Safari
9.0

You may also like

Guides