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.

Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • 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:

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+

Latest Udacity Coupon Found:

Verified STAFF PICK

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!

Expiration date: 25/01/2021
3176 People Used
Only 97 Left
Rating
5.0