CSS Transforms

July 02, 2018

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.

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.

2D Transforms

2D transforms work on x-axis and y-axis, while 3D transforms work on x-axis, y-axis, and z-axis.

Let’s look at the four 2D Transform properties:

2D rotate

Takes 1 parameter: the degrees or percentage by which the element should be rotated relative to the x-axis.

transform: rotate(20deg)

2D scale

Takes 1 parameter: the multiple by which the element should be scaled to. scale(2) will make the element twice the original size. scale(0.5) will make it half in size.

transform: scale(0.5)

2D translate

This property is used to translate, or move the element along the X or Y axis. It has multiple sub properties: translateX or translateY

transform: translateX(20px)
transform: translateY(30px)

In addition, you can specify both together with just translate Thus, you can combine the two lines of code above to just:

transform: translate(20px, 30px)

2D skew

This property is used to distort elements on the horizontal axis, vertical axis, or both.

transform: skewX(5deg)
transform: skewY(10deg)

As with translate, you can combine multiple axes with just skew

transform: skew(5deg, 10deg)

Transform origin

Transform origin is the point relative to which the above transforms are applied. The default transform-origin is middle of the element, but you can change that by defining transform-origin yourself. It can take one or two properties, for x-axis or y-axis respectively. These can be percentage, pixels or default values such as top, left, bottom and right). Here are a few examples:

transform-origin: top left;
transform-origin: 50px 50px;
transform-origin: bottom right 60px;

Example

Let’s combine the properties we’ve learned so far into one example. Feel free to play around and edit the example as you please.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
      left: 50px;
      transform: rotate(20deg) scale(1.2) translate(20px, 30px) skew(5deg, 20deg);
      transform-origin: top;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

3D Transforms

3D Transforms are very similar to 2D transforms, except that they take the third z-axis into account as well. Thus, the 2D Transform properties we saw earlier translate directly to 3D transforms, alongwitw the addition of translateZ and skewZ properties.

Perspective

In order for 3D transforms to work, the elements need a perspective from which the transform takes place. The perspective for each element can be thought of as a vanishing point. 3D transforms are not used very frequently, but if you’re curious, you should check out the Perspective documentation at MDN.

Support and Usage

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 will learn more about animations in the next tutorial here: CSS Transitions and Animations.