CSS Transforms

The transform property lets you move, scale, rotate, and skew elements without affecting document flow. Transforms are GPU-friendly (especially with transitions/animations) and pair well with opacity for smooth effects.

1) translate()


.box:hover{
  transform: translate(18px, -10px);
}
translate

2) scale()


.box:hover{ transform: scale(1.2); }
scale

3) rotate()


.box:hover{ transform: rotate(12deg); }
rotate

4) skew()


.box:hover{ transform: skew(6deg, 2deg); }
skew

5) transform-origin


.box:hover{ transform-origin: 0% 0%; transform: rotate(12deg); }
origin TL
origin C
origin BR

Origin controls the pivot point for rotations/scales (default center).

6) Combining Transforms


.card:hover{
  transform: translateY(-6px) rotate(6deg) scale(1.06);
}
combo

7) 3D: perspective & transform-style: preserve-3d


.scene { perspective: 800px; }
.cube  { transform-style: preserve-3d; }
1
2
3
4
5
6

Perspective is set on the parent; the child preserves its 3D children.

8) Flip Card & backface-visibility


.flipcard{ transform-style: preserve-3d; }
.flip-face{ backface-visibility: hidden; }
Front
Back
no bfv
bfv: hidden

Tips & Best Practices:

  • Prefer transforming composited properties (transform/opacity) for smooth 60fps transitions.
  • Use will-change: transform; sparingly to hint the browser about upcoming animations.
  • Combine with transitions/animations for micro-interactions (cards, buttons, modals).
  • For 3D, set perspective on the parent and transform-style: preserve-3d on the child.
  • Hide mirrored backs with backface-visibility: hidden on flipped faces.