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):
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.

- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid certificates of completion

- Professional service
- Flexible timetables
- A variety of features to choose from
- Professional certificates of completion
- University-level courses
- Multiple Online degree programs

- Great user experience
- Offers quality content
- Very transparent with their pricing
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
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:
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

Edge

Firefox

IE

Opera

Safari
Mobile browser support

Chrome

Firefox

Opera

Safari
Latest Udacity Coupon Found:
75% OFF COURSES
Udacity Black Friday Offer
The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!