aniqa.dev
← Archive10 / 16

ExperimentNo. 10Updated

Transform Tiles

Twelve animated squares show what each CSS transform does. Pause them, change the speed or perspective, and hover or focus a tile to read its current value.

Made
Oct 2023
Type
CSS study
Stack
CSS transforms / Web Animations API
Links
Code ↗v1 ↗
starting position transform-origin (center)Perspective only changes the last two tiles. Compare them with RotateX and RotateY.
Hover or focus a tile to pause it · adjust speed and perspective

Idea

I wanted to see what each CSS transform does. The dashed square marks where a tile starts, so it’s easy to compare as it moves, stretches or turns.

Notes

  1. I used the Web Animations API to run each tile through the original keyframes. The readout follows along and shows its current transform.
  2. Hover or focus a tile to pause it and check its value. Pause stops every tile; Speed slows them all down.
  3. Perspective only affects the last two tiles. Changing it keeps those animations at the same point, so they don’t jump back to the start.
  4. With reduced motion on, the tiles start paused at a point where each transform is visible.

Revisited

  1. Oct 2023: first version, made on CodePen (v1).
  2. Nov 2026: rebuilt it for the lab with Day and Night colours.