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.
This element is rotated using a transform.
Hover over the element to see it rotate back.
<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>
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 |
|
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 moves an element along the x and y-axis.
This example has a standard element and 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 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.
<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 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.
<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 function skews an element along the x and y-axis.
This example has a standard element and 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>
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 |
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 |
