Transforms allow you to translate, rotate, scale, and skew elements in 2D or 3D space. They are powerful on their own and even more impressive when combined with transitions and animations.

2D Transform Functions

The transform property accepts these functions:

Function	Description
translate(x, y)	Move elements horizontally and vertically
rotate(angle)	Rotate elements by a specified angle
scale(x, y)	Resize elements
skew(x, y)	Twist or slant an element

translate()

Move an element from its current position:

.box {
  transform: translate(100px, 50px);
}

Axis-specific versions: translateX() and translateY().

rotate()

Rotate an element around its center:

.box {
  transform: rotate(45deg);
}

Positive values rotate clockwise; negative values rotate counter-clockwise.

scale()

Resize an element:

.box {
  transform: scale(2, 0.5);  /* 2x width, 0.5x height */
}

A single value scales both dimensions equally: scale(2) doubles the size.

Axis-specific versions: scaleX() and scaleY().

skew()

Slant an element:

.box {
  transform: skew(10deg, 5deg);
}

Axis-specific versions: skewX() and skewY().

Combining Transforms

Combine multiple transforms by separating them with spaces:

.box {
  transform: rotate(45deg) scale(1.5) translateX(100px);
}

The order matters! Transforms are applied right to left.

Transform Origin

By default, transforms happen around the element’s center. Use transform-origin to change this:

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

Values can be keywords (top, bottom, left, right, center) or specific coordinates.

3D Transforms

Add depth with 3D transforms using the Z axis.

perspective

The perspective property sets how far the viewer is from the 3D object:

.container {
  perspective: 500px;
}

Lower values create a more dramatic 3D effect.

3D Functions

• translateZ() - Move along the Z axis (closer/farther)
• rotateX() - Rotate around the X axis
• rotateY() - Rotate around the Y axis
• rotateZ() - Rotate around the Z axis (same as 2D rotate())

.card {
  transform: rotateY(30deg);
}

Shorthand versions: translate3d(), rotate3d(), scale3d().

Example: 3D Card Flip

.card {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

.card:hover {
  transform: rotateY(180deg);
}

The transform-style: preserve-3d ensures child elements maintain their 3D position.

Lessons in this unit:

0:	Introduction
1:	▶︎ How to Use CSS Transforms (2D and 3D)
2:	How to Create Smooth CSS Transitions
3:	How to Create CSS Animations with Keyframes
4:	How to continuously rotate an image using CSS
5:	Compare the options for Animations on the Web