Contents
CSS element transformations
By using the CSS transform property, you can modify the look of a 2D or 3D element (e.g., make CSS scale it or rotate it):
Example
div {
-webkit-transform: rotate(10deg); /* Safari, Chrome, Opera */
-ms-transform: rotate(10deg); /* Internet Explorer 9 */
transform: rotate(10deg);
}There are multiple transform functions you can apply to achieve different results. We will present them in the following section.
Transform CSS syntax and property values
The syntax for the transform property is CSS is as follows:
transform: function(values);
See the table below to get familiar with the available functions:
| Function | Values | Description |
|---|---|---|
none |
The default value. Determines that there are no CSS transformations | |
matrix() |
n,n,n,n,n,n | Defines a 2D transformation in a six-valued matrix |
matrix3d |
n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n | Defines a 3D transformation in a 4x4 matrix |
translate() |
x,y | Defines a 2D translation |
translate3d() |
x,y,z | Defines a 3D translation |
translateX() |
x | Defines a horizontal translation |
translateY() |
y | Defines a vertical translation |
translateZ() |
z | Defines a Z-axis translation |
scale() |
x,y | Scales a 2D element |
scale3d() |
x,y,z | Scales a 3D element |
scaleX() |
x | Scales an element horizontally |
scaleY() |
y | Scales an element vertically |
scaleZ() |
z | Scales an element along the z-axis |
rotate() |
angle | Rotates a 2D element by a defined angle |
rotate3d() |
x,y,z,angle | Rotates a 3D element by a defined angle |
rotateX() |
angle | Rotates an element by a defined angle on the x-axis |
rotateY() |
angle | Rotates an element by a defined angle on the y-axis |
rotateZ() |
angle | Rotates an element by a defined angle on the z-axis |
skew() |
x-angle,y-angle | Skews a 2D element |
skewX() |
angle | Skews an element on the x-axis |
skewY() |
angle | Skews an element on the y-axis |
perspective() |
n | Defines the distance between the viewer and z=0 |
In this example, we create and rotate elements using the transform CSS property:
Example
body {
margin: 35px;
background-color: #41a3f4;
}
div.polaroid {
width: 295px;
padding: 11px 11px 21px 15px;
border: 2px solid #BFBFBF;
background-color: red;
box-shadow: 11px 11px 6px #aaaaaa;
}
div.rotate_right {
float: left;
-webkit-transform: rotate(10deg); /* Safari */
-ms-transform: rotate(10deg); /* Internet Explorer 9 */
transform: rotate(10deg);
}
div.rotate_left {
float: right;
-webkit-transform: rotate(-10deg); /* Safari */
-ms-transform: rotate(-10deg); /* Internet Explorer 9 */
transform: rotate(-10deg);
}Note: you can read more about
translate(),translate3d(),translateX()andtranslateY()in this tutorial.
Browser support
Chrome
36+
Edge
12+
Firefox
16+
IE
10+
Opera
23+
Safari
9+
Mobile browser support
Chrome
36+
Firefox
16+
Opera
24+
Safari
9+