🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

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.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
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
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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+