CSS3 2D Transforms

CSS 2D Transforms

Introduction to CSS Transforms

CSS transforms allow you to modify the visual presentation of elements by translating (moving), rotating, scaling, and skewing them in 2D or 3D space.

These transformations affect the visual rendering but do not change the element’s position in the normal document flow, meaning they don’t affect the layout of surrounding elements.

This chapter focuses on 2D transforms.

Browser Support for 2D Transforms

2D transforms are widely supported in modern browsers. Vendor prefixes (-webkit-, -moz-, etc.) are generally no longer needed for standard transform functions.

Property	Internet Explorer	Chrome	Firefox	Safari	Opera
transform	IE 9+	Chrome	Firefox	Safari	Opera
transform-origin	IE 9+	Chrome	Firefox	Safari	Opera

Common 2D Transform Functions

Transforms are applied using the transform property with one or more transform functions:

• translate(x, y): Moves the element horizontally (x) and vertically (y).
• translateX(x): Moves the element horizontally.
• translateY(y): Moves the element vertically.
• rotate(angle): Rotates the element clockwise by the specified angle (e.g., 45deg). Negative values rotate counter-clockwise.
• scale(x, y): Resizes the element. scale(2, 1.5) doubles the width and makes height 1.5 times larger. scale(0.5) shrinks it by 50% uniformly.
• scaleX(x): Scales the width.
• scaleY(y): Scales the height.
• skew(x-angle, y-angle): Skews the element along the X and Y axes.
• skewX(angle): Skews along the X-axis.
• skewY(angle): Skews along the Y-axis.
• matrix(a, b, c, d, e, f): Combines all 2D transforms into one using a transformation matrix.

The translate() Method

Moves an element from its current position without affecting the layout flow. Positive values move right/down, negative values move left/up.

Example: Move 50px right and 100px down.

.target-element {
  transform: translate(50px, 100px);
}

The rotate() Method

Rotates an element around its origin point (by default, the center). Uses units like degrees (deg), radians (rad), or turns (turn).

Example: Rotate 30 degrees clockwise.

.target-element {
  transform: rotate(30deg);
}

Example: Rotate 45 degrees counter-clockwise.

.target-element {
  transform: rotate(-45deg);
}

The scale() Method

Changes the size of an element. A value of 1 means original size, 2 means double size, 0.5 means half size.

Example: Double the width, keep original height.

.target-element {
  transform: scale(2, 1); /* or scaleX(2) */
}

Example: Shrink the element uniformly to 75% of its size.

.target-element {
  transform: scale(0.75);
}

The skew() Method

Tilts an element along the horizontal or vertical axis.

Example: Skew 20 degrees along the X-axis.

.target-element {
  transform: skewX(20deg);
}

Example: Skew -10 degrees along the Y-axis.

.target-element {
  transform: skewY(-10deg);
}

Example: Skew along both axes.

.target-element {
  transform: skew(20deg, -10deg);
}

The transform-origin Property

By default, transformations like rotate() and scale() happen around the center of the element ( 50% 50% or center center). The transform-origin property allows you to change this point.

Example: Rotate around the top-left corner.

.target-element {
  transform-origin: top left; /* or 0 0 */
  transform: rotate(45deg);
}

Example: Scale from the bottom edge.

.target-element {
  transform-origin: center bottom; /* or 50% 100% */
  transform: scaleY(1.5);
}

Combining Multiple Transforms

You can apply multiple transform functions within a single transform property. The order matters!

Example: Rotate first, then translate.

.target-element {
  transform: rotate(45deg) translate(100px, 0);
}

Example: Translate first, then rotate (will likely produce a different result!).

.target-element {
  transform: translate(100px, 0) rotate(45deg);
}

Performance Note

Transforms (especially translate and scale) are often hardware-accelerated by browsers, making them performant choices for animations compared to manipulating layout properties like top, left, or margin.

CSS Transform Properties Summary

Property	Description
transform	Applies a 2D or 3D transformation to an element.
transform-origin	Changes the position of the origin point for transformations.

2D Transform Functions

Function	Description
matrix(n,n,n,n,n,n)	Defines a 2D transformation using a matrix of six values.
translate(x,y)	Defines a 2D translation.
translateX(n)	Defines a 2D translation along the X-axis.
translateY(n)	Defines a 2D translation along the Y-axis.
scale(x,y)	Defines a 2D scale transformation.
scaleX(n)	Defines a 2D scale transformation along the X-axis.
scaleY(n)	Defines a 2D scale transformation along the Y-axis.
rotate(angle)	Defines a 2D rotation.
skew(x-angle,y-angle)	Defines a 2D skew transformation along the X and Y axes.
skewX(angle)	Defines a 2D skew transformation along the X-axis.
skewY(angle)	Defines a 2D skew transformation along the Y-axis.