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.
A transformed (rotated) <div> element.
<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>
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.
transform: none | transform-functions |
initial | inherit;
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 |
Click the buttons to see the different transform values.
<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>
A single transformation can can have multiple transformation functions.
The text below is scaled, rotated, and skewed.
<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>
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 |
