🔄 2D and 3D Transforms

What Transforms Do

A transform reshapes how an element is painted without changing where it lives in the document. That distinction is the whole point: an element scaled to 1.5× or nudged 40px still occupies its original box in the layout, so nothing around it reflows or jumps.

💡 Think like a designer. Transforms give you the same move/scale/rotate handles you'd find in design software — but declarative, animatable, and running in the browser. The element's "real" position is the anchor; the transform is a visual overlay on top of it.

The 2D Transform Functions

2D transforms act on the X (horizontal) and Y (vertical) axes. Four functions cover nearly everything.

translate(x, y) — move

Shifts an element relative to its current spot. Percentages are relative to the element's own size, which makes tricks like perfect centering easy.

.move  { transform: translate(20px, 30px); } /* right + down */
.moveX { transform: translateX(20px); }
.center-y { top: 50%; transform: translateY(-50%); } /* classic vertical centering */

scale(x, y) — resize

1 is original size, >1 grows, <1 shrinks. A single value scales both axes; two values scale them independently.

.grow   { transform: scale(1.5); }
.stretch{ transform: scale(2, 0.5); } /* wide + short */
.flip-h { transform: scaleX(-1); }    /* mirror horizontally */

rotate(angle) — spin

Rotates around the transform-origin (center by default). Positive angles turn clockwise. Units can be deg, rad, or turn.

.tilt  { transform: rotate(45deg); }
.back  { transform: rotate(-90deg); }
.quarter { transform: rotate(0.25turn); } /* = 90deg */

skew(x, y) — slant

Tilts the element's axes, producing a parallelogram. Useful for dynamic, angular design accents.

.lean { transform: skew(20deg, 10deg); }
.leanX{ transform: skewX(-15deg); }

Order & transform-origin

/* Moves right, THEN rotates in place */
.a { transform: translateX(100px) rotate(45deg); }

/* Rotates the axes first, THEN moves along the tilted X — ends up diagonal */
.b { transform: rotate(45deg) translateX(100px); }

transform-origin — the pivot point

By default every transform pivots around the element's center (50% 50%). transform-origin relocates that pivot — the hinge a door swings on, the base a clock hand sweeps from.

/* Rotate from the top-left corner instead of the center */
.hinge { transform-origin: top left; transform: rotate(15deg); }

/* A clock hand pivots at its base, not its middle */
.clock-hand {
  transform-origin: bottom center;
  transform: rotate(30deg); /* 1 o'clock */
}

Entering 3D: perspective

3D transforms add a Z axis — depth, toward and away from the viewer. But without perspective, a rotateY just looks like a squashed 2D element, because the browser has no sense of how far away "the camera" is.

perspective sets that camera distance. Smaller values put the viewer closer, exaggerating the 3D effect; larger values flatten it. Apply it to the parent container so all 3D children share one vanishing point:

/* Preferred: one shared perspective on the parent */
.scene { perspective: 1000px; }
.scene .card { transform: rotateY(45deg); }

/* Or bake it into a single element's transform */
.solo { transform: perspective(1000px) rotateY(45deg); }

3D Functions & Properties

Rotating in three axes

.flipUp   { transform: rotateX(45deg); }  /* tips forward/back  */
.flipSide { transform: rotateY(45deg); }  /* swings left/right  */
.spin     { transform: rotateZ(45deg); }  /* same as 2D rotate  */

Moving and scaling in depth

.pushOut { transform: translateZ(50px); }          /* toward viewer   */
.move3d  { transform: translate3d(20px, 30px, 50px); }
.deep    { transform: scale3d(1.5, 2, 0.5); }

Two supporting properties make multi-element 3D scenes work:

Worked Example: 3D Card Flip

The card flip pulls every 3D concept together: a scene with perspective, an inner card with preserve-3d that rotates on hover, and two faces — the back pre-rotated 180° — each with backface-visibility: hidden.

<div class="scene">
  <div class="flip-card">
    <div class="face front">Question</div>
    <div class="face back">Answer</div>
  </div>
</div>

.scene { perspective: 1000px; width: 220px; height: 300px; }

.flip-card {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;          /* keep faces in 3D */
  transition: transform 0.8s;            /* animate the flip  */
}
.scene:hover .flip-card { transform: rotateY(180deg); }

.face {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 12px;
  backface-visibility: hidden;           /* hide the reverse  */
}
.front { background: #2563eb; color: #fff; }
.back  {
  background: #ef4444; color: #fff;
  transform: rotateY(180deg);            /* pre-flip the back */
}

Performance & Compatibility

.animated { will-change: transform; }         /* pre-promote for animation */

Support is excellent in every modern browser — no vendor prefixes needed today. If you must support very old engines, let an autoprefixer/PostCSS add -webkit- for you rather than hand-writing prefixes. Also mirror the reduced-motion guard from the transitions lesson so 3D flips don't spin for motion-sensitive users.

Hands-on Exercise

<div class="scene" id="card">
  <div class="flip-card">
    <div class="face front">perro</div>
    <div class="face back">dog</div>
  </div>
</div>

.scene { perspective: 1000px; width: 200px; height: 280px; }
.flip-card {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d; transition: transform 0.8s;
}
.flip-card.is-flipped { transform: rotateY(180deg); }
.face {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 12px; backface-visibility: hidden; font-size: 1.5rem;
}
.front { background: #2563eb; color: #fff; }
.back  { background: #ef4444; color: #fff; transform: rotateY(180deg); }

const card = document.getElementById('card');
card.addEventListener('click', () => {
  card.querySelector('.flip-card').classList.toggle('is-flipped');
});

Summary & Quiz

📚 Further Reading

• MDN — transform
• MDN — Using CSS transforms
• Intro to CSS 3D Transforms — David DeSandro
• CSS-Tricks — transform almanac

🚀 What's Next?

You've now covered the full CSS Fundamentals module — box model, layout, flow, effects, transitions, and transforms. It's time to put it all together in the Weekend Project, where you'll build and style a complete component from scratch.