Transforms

The transform property

The transform property allows us to visually manipulate elements by scaling, skewing, rotating, or translating them.

For example:

.element {   
  width: 30px;   
  height: 30px;   
  transform: scale(10); 
}

Despite our declarations for height and width, the transform property scales our element to be ten times their original size!

Transforms are especially fun when combined with animations.

Transform functions

We can use the following functions:

• scale(): scales the size of an element.
• skew(): turns an element to the right or left.
• rotate(): rotates the element clockwise.
• translate(): repositions the element in a horizontal or vertical direction.
• perspective(): sets the depth used in 3D transforms.

Let’s review each in more detail.

The scale() function

The scale() function is shorthand for the scaleX() and scaleY() functions.

The scaleX() function resizes the element horizontally (x-axis) and the scaleY() function resizes it vertically (y-axis).

For example, lets scale the width of .element by 2 (doubling its width) and reduce its height by 0.5 (reducing its height by half):

.element {
  transform: scale(2, 0.5);
}

The first parameter of the scale() function is scaleX() and the second is scaleY().

The skew() function

The skew() function tilts an element left or right. It’s also shorthand for the skewX() and skewY() functions. Below are some examples of the different ways we can skew an element.

To skew horizontally (x-axis):

transform: skewX(15deg);

To skew vertically (y-axis):

transform: skewY(15deg);

To skew along both axes simultaneously:

transform: skew(15deg, 15deg);

The rotate() function

The rotate() function rotates an element clockwise from its original position:

transform: rotate(25deg);

We can use a negative value to rotate it in the opposite direction:

transform: rotate(-25deg);

The translate() function

The translate() function shifts an element in a horizontal or vertical direction:

transform: translate(50px, 10px);

The example above moves the element 50px (to the right) on its horizontal axis and 10px (down) on its vertical axis.

Similarly with the scale() and skew() functions, the translate() function is shorthand for the translateX() and translateY() functions:

transform: translateX(50px);
transform: translateY(10px);

We use negative values to move an element to the left or up.

We can use any valid length value, like px, em, or rem.

Combining multiple transforms

We can combine multiple transforms by separating each function with a space:

transform: rotateY(30deg) scaleX(2) translateX(200px);

3D transforms

With 3D transforms, we add a third z-axis, which adds depth.

The following functions control the z-axis:

• The translateZ() function.
• The rotateZ() function.
• The scaleZ() function.

For these, we have the corresponding shorthand functions translate3d(), rotate3d(), and scale3d() for when we want to combine the translateX(), translateY() and translateZ() functions.

The perspective transform

The perspective transform specifies the distance at which a 3D object appears from the viewer:

.element {
  perspective: 100px;
}

Low values produce a more intense effect in comparison to high values.

The perspective-origin transform

The perspective-origin transform sets the position from which the user views the element:

.element {
  perspective: 100px;
  perspective-origin: left;
}

It positions the 3D object as if it’s being viewed differently.