🔄 CSS

CSS Transforms — translate, scale, rotate and a Taste of 3D

📅 Jul 3, 2026 ⏱ 3 min read

Transforms move, resize and rotate elements without touching layout — GPU-accelerated, so they're the only things worth animating (with opacity).

The 2D set

transform: translate(20px, -10px);   /* move — layout unaffected */
transform: translateX(-50%);          /* % = of OWN size (centering trick) */
transform: scale(1.05);               /* hover zoom */
transform: rotate(45deg);
transform: skewX(10deg);
transform: translateY(-4px) scale(1.02);   /* combine: order matters! */

transform-origin: top left;          /* pivot point (default center) */

The 3D card flip (portfolio favourite)

.scene { perspective: 800px; }
.card {
  transform-style: preserve-3d;
  transition: transform 0.6s;
  position: relative;
}
.scene:hover .card { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; }
.back { transform: rotateY(180deg); }

perspective on the PARENT sets 3D depth; smaller = more dramatic
Transforms create a stacking context — a z-index gotcha to remember

Build the flip in the Playground — it's 15 lines total.

← All Articles