It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The Transform CSS Property

Reading time 2 min
Published Aug 8, 2017
Updated Sep 30, 2019

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() and translateY() in this tutorial.

Browser support

Browser image
Chrome
36+
Browser image
Edge
12+
Browser image
Firefox
16+
Browser image
IE
10+
Browser image
Opera
23+
Browser image
Safari
9+

Mobile browser support

Browser image
Chrome
36+
Browser image
Firefox
16+
Browser image
Opera
24+
Browser image
Safari
9+