The transform property gives us a way to position and alter elements. It comes in two settings: 2-Dimensional and 3-Dimensional. Each of those comes with different settings and properties, we’ll take a look at both of them in this tutorial

Support-wise, most of the modern browsers support the transform property. It's recommended to use the vendor prefixes on every instance of transform property. So, to make a div 1.5 times the original size, you would write:

div {
  -webkit-transform: scale(1.5);
     -moz-transform: scale(1.5);
       -o-transform: scale(1.5);
          transform: scale(1.5);
}

Usage-wise, transform is mainly used in custom animations which are built using @keyframes css property. You can read more about animations in our tutorial here: CSS Transitions and Animations.

Syntax-wise, transform property has multiple sub-properties which declare how the element should be transformed. For instance, in the example above, we used the scale property. But there are a number of these like rotate, translate and skew in addition to scale. Let's look at 2D transforms first.