DEV Community

Cover image for CSS Transforms Tutorial
Richard Rembert
Richard Rembert

Posted on • Updated on

CSS Transforms Tutorial

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); 
}
Enter fullscreen mode Exit fullscreen mode

Despite our height and width declarations, the transform scales our element to ten times its 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 its left or right.
  • rotate(): rotates an element clockwise from its current position.
  • translate(): repositions an element in a horizontal or vertical direction.
  • perspective(): sets the depth used in 3D transforms.

Let’s take a look at each!

Scale

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

scaleX() resizes an element along its x-axis (horizontally) and scaleY() along its y-axis (vertically).

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

.element {
  transform: scale(2, 0.5);
}
Enter fullscreen mode Exit fullscreen mode

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

Skew

The skew() function tilts an element left or right. It’s also shorthand for skewX() and skewY().

Skew along the x-axis (horizontal):

transform: skewX(15deg);
Enter fullscreen mode Exit fullscreen mode

Skew along the y-axis (vertical):

transform: skewY(15deg);
Enter fullscreen mode Exit fullscreen mode

Skew along both axis simultaneously:

transform: skew(15deg, 15deg);
Enter fullscreen mode Exit fullscreen mode

Rotate

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

transform: rotate(25deg);
Enter fullscreen mode Exit fullscreen mode

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

transform: rotate(-25deg);
Enter fullscreen mode Exit fullscreen mode

Translate

The translate() function moves an element in a horizontal or vertical direction (from its original position):

transform: translate(50px, 10px);
Enter fullscreen mode Exit fullscreen mode

Here our element will have moved 50px (to the right) on its horizontal axis, and 10px (down) on its vertical axis.

This is shorthand for:

transform: translateX(50px);
transform: translateY(10px);
Enter fullscreen mode Exit fullscreen mode

To instead move to the left or up, we’d simply use negative values.

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

Combining multiple transforms

Multiple transforms can be combined, by separating each function with a space:

transform: rotateY(30deg) scaleX(2) translateX(200px);
Enter fullscreen mode Exit fullscreen mode

3D transforms

With 3D transforms, we add a third “z” axis, which adds the depth dimension.

The following additional functions control the Z axis:

  • translateZ()
  • rotateZ()
  • scaleZ()

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

Perspective

The perspective property specifies how far away a 3D object appears from the viewer:

.element {
  perspective: 100px;
}
Enter fullscreen mode Exit fullscreen mode

A lower value will result in a more intense 3D effect than a higher value.

Note that when defining perspective for an element, the child elements get the perspective view, not the element itself.

Perspective-origin

The perspective-origin property defines at which position the user is looking at the 3D object:

.element {
  perspective: 100px;
  perspective-origin: left;
}
Enter fullscreen mode Exit fullscreen mode

It positions the 3D object as if it’s being viewed from a different angle.

Conclusion

If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
Buy Me A Coffee If you enjoyed this article & would like to leave a tip — click here

🌎 Let's Connect

Top comments (0)