CSS Transforms

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 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);
}

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);

Skew along the y-axis (vertical):

transform: skewY(15deg);

Skew along both axis simultaneously:

transform: skew(15deg, 15deg);

Rotate

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);

Translate

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

transform: translate(50px, 10px);

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);

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);

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;
}

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;
}

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

Related Posts:

• CSS Transitions
• CSS Animation
• Feature Queries