Build 3D scenes from cuboids

Build 3D from cuboids: preserve-3d, one perspective, a vmin size.

Jhey Tompkins@jh3yy · via design-motion-principles
Think in cubes instead of boxes
Motion cookbook §8@jh3yy on X ↗

From design-motion-principles, cookbook §8 3D CSS.

Six faces, or one flat card

Drag a cube, pull Explode, then untick preserve-3d.

Default flatBad
transform-style: flat
preserve-3d everywhereGood
rotateX(-24deg) rotateY(36deg)

.scene { perspective: 1000px; transform-style: preserve-3d; }
.cube  { transform-style: preserve-3d; }
.front { transform: translateZ(calc(var(--size) / 2)); }
.right { transform: rotateY(90deg) translateZ(calc(var(--size) / 2)); }

One camera on the scene

Drag Perspective and compare the vanishing points.

Perspective per cubeBad
.cube { transform: perspective(600px) … }
Perspective on sceneGood
.scene { perspective: 600px; }

A bench from one --size

Shrink the viewport, or type a new --size.

Sized in pxBad
--size: 44px
Sized from a variableGood
--size: 20cqmin

Why it matters, pros and cons

Why it matters

Any 3D object breaks down into cuboids. Solve one, and every shape is an assembly.

Pros

  • One primitive for every shape
  • One vmin variable scales the whole scene
  • Transforms only, so it animates cheaply

Cons

  • Six nodes per cuboid adds up fast
  • filter, opacity and overflow force flat
  • Rarely the answer in client UI