CSS Transforms

CSS transforms allow you to manipulate an element's appearance by rotating, scaling, skewing, or translating it.

These transformations can be applied individually or combined to create complex visual effects. CSS also supports 3D transforms, which add depth to your transformations.

This chapter will introduce you to the various 2D and 3D transform functions and how to use them effectively.

The transform property is used to apply transformations to an element. You can use one or more transform functions within the transform property.

.element {
  transform: transform-function(value) transform-function(value) ...;
}

Now let's start with some of the most commonly used 2D transform functions:

translate()

The translate() function moves an element from its current position. You can specify the distance to move the element along the X and Y axes.

.element {
  transform: translate(50px, 100px); /* Move 50px to the right and 100px down */
}

translateX()

The translateX() function moves an element horizontally.

.element {
  transform: translateX(50px); /* Move 50px to the right */
}

translateY()

The translateY() function moves an element vertically.

.element {
  transform: translateY(100px); /* Move 100px down */
}

rotate()

The rotate() function rotates an element around a fixed point (usually the center). The value is an angle in degrees.

.element {
  transform: rotate(45deg); /* Rotate 45 degrees clockwise */
}

scale()

The scale() function resizes an element. You can specify scaling factors for the X and Y axes.

.element {
  transform: scale(2, 0.5); /* Double the width and halve the height */
}

scaleX()

The scaleX() function resizes an element horizontally.

.element {
  transform: scaleX(1.5); /* Increase the width by 50% */
}

scaleY()

The scaleY() function resizes an element vertically.

.element {
  transform: scaleY(0.75); /* Reduce the height to 75% */
}

`skew()`

The skew() function skews an element along the X and Y axes. Skewing distorts an element by slanting it.

.element {
  transform: skew(30deg, 20deg); /* Skew 30 degrees along the X axis and 20 degrees along the Y axis */
}

skewX()

The skewX() function skews an element along the X axis.

.element {
  transform: skewX(30deg); /* Skew 30 degrees along the X axis */
}

skewY()

The skewY() function skews an element along the Y axis.

.element {
  transform: skewY(20deg); /* Skew 20 degrees along the Y axis */
}

Perspective

Before we discuss 3D transforms, I think examining another property called "perspective" is essential. By applying perspective, you can control how 3D elements are viewed, adding depth and realism to your designs.

The perspective property defines the object's distance from the viewer. This affects the appearance of 3D-transformed elements, making them look closer or farther away. So, the lower the value, the closer it is to the viewer.

.container {
  perspective: value;
}

value: A length value that determines the distance between the z=0 plane and the user. It can be specified in CSS length units (e.g., px, em, rem). A smaller value creates a more pronounced perspective effect, while a larger value makes the effect subtler.

Another useful property is the perspective-origin property, which defines the viewer's position when looking at the 3D-transformed elements and determines the vanishing point for the perspective effect.

.container {
  perspective-origin: x y;
}

x: The horizontal position of the vanishing point. It can be a length value or a percentage (e.g., left, center, right, 50%, 100px).
y: The vertical position of the vanishing point. It can be a length value or a percentage (e.g., top, center, bottom, 50%, 100px).

I made this CodePen so you can adjust the values to get a better idea of how they can affect you.

Now we can move on to the 3D properties.

rotateX()

The rotateX() function rotates an element around the X axis.

.element {
  transform: rotateX(45deg); /* Rotate 45 degrees around the X axis */
}

rotateY()

The rotateY() function rotates an element around the Y axis.

.element {
  transform: rotateY(45deg); /* Rotate 45 degrees around the Y axis */
}

rotateZ()

The rotateZ() function rotates an element around the Z axis (similar to the 2D rotate()).

.element {
  transform: rotateZ(45deg); /* Rotate 45 degrees around the Z axis */
}

Multiple Transforms

As mentioned at the start, you can combine multiple transform functions to achieve complex transformations. The functions are applied in the order they are specified:

.element {
  transform: translate(50px, 100px) rotate(45deg) scale(1.5, 1.5);
}

Transform Origin

The transform-origin property allows you to change the point around which a transformation is applied. By default, the origin is the center of the element.

.element {
  transform-origin: x y;
}

x: Specifies the horizontal position of the origin (e.g., left, center, right, or a length/percentage).
y: Specifies the vertical position of the origin (e.g., top, center, bottom, or a length/percentage).

And for a complete example:

.element {
  transform-origin: top left;
  transform: rotate(45deg);
}

Examples

Let's see these transform properties in action with practical examples.

Here's a CodePen showcasing some 2D effects in action:

And then for 3D, hover over this CodePen's elements to see how the transform effects each element:

I hope you can see now that CSS transforms provide powerful ways to manipulate the appearance of elements by translating, rotating, scaling, or skewing them in both 2D and 3D space.