CSS 2D Transforms

A 2D transform reshapes how an element is drawn on screen — moved, spun, resized, or tilted — without changing the space it takes up in the normal document flow, and without touching the HTML at all.

In this page:

What Counts as a 2D Transform
transform-origin
The matrix() Function
Order of Combined Transforms
2D Transforms and Layout

What Counts as a 2D Transform

A 2D transform operates purely within the flat X/Y plane of the screen: it can move, rotate, scale, or skew an element, but never gives it depth. All of these functions are passed as values of the single transform property, and several can be combined in one declaration.

Example: What Counts as a 2D Transform

css

<style>
.box {
  transform: translateX(20px) rotate(10deg) scale(1.1);
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
</style>
<div class="box">Move, rotate, and scale, all within the flat X/Y plane</div>

transform-origin

transform-origin sets the fixed point a rotation or scale pivots around, defaulting to the element's exact center (50% 50%). Changing it to a corner or edge makes a rotate() spin around that point instead, which matters a lot for hinge-like or corner-anchored animations.

Example: transform-origin

css

<style>
.box {
  transform-origin: top left;
  transform: rotate(30deg);
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
</style>
<div class="box">Pivots around its top-left corner instead of the center</div>

The matrix() Function

matrix(a, b, c, d, tx, ty) is the low-level mathematical form every other 2D transform function compiles down to internally — six numbers encoding scale, skew, and translation in one matrix. It's rarely written by hand, but understanding it explains why transform functions compose the way they do.

Example: The matrix() Function

css

<style>
.box {
  transform: matrix(1, 0, 0, 1, 20, 10);
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
</style>
<div class="box">matrix() equivalent to translate(20px, 10px)</div>

Order of Combined Transforms

When multiple transform functions are listed in one declaration, they apply right-to-left in effect, meaning the order you write them changes the visual result — rotating then translating produces a different outcome than translating then rotating the same amounts.

Example: Order of Combined Transforms

css

<style>
.a {
  transform: rotate(45deg) translate(50px);
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
  margin: 30px;
}
.b {
  transform: translate(50px) rotate(45deg);
  background: seagreen;
  color: white;
  padding: 10px;
  display: inline-block;
  margin: 30px;
}
</style>
<div class="a">Rotate then translate</div>
<div class="b">Translate then rotate — a different result</div>

2D Transforms and Layout

Because transforms operate after layout is calculated, a transformed element still reserves its original, untransformed space in the page flow — visually moving an element with translate() does not shift its neighboring elements, unlike changing margin or position would.

Example: 2D Transforms and Layout

css

<style>
.moved {
  transform: translateX(60px);
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
</style>
<div class="moved">Moved visually</div>
<div style="background: #ddd; padding: 10px; display: inline-block;">Neighbor does not shift — original space still reserved</div>

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Transforms Next Lesson → CSS 3D Transforms