Skip to content
All effectsSpinner

Cube Tumble

One square tumbling on two axes in turn. Half-turns instead of one full spin, so each face lands flat before the next move, and four of them bring it back to the start, so the loop has no seam.

Pure CSSSpinnerPro

Usage

Meant for

SpinnerEmpty State

Examples

On a Card

Half-turns instead of one full spin, so each face lands flat before the next move — four of them, X, Y, X, Y, so it comes back to where it started and the loop has no seam. The perspective is baked into the transform — no wrapper. Big enough to be the picture of an empty state, which is where it belongs.

Preparing your workspaceImporting 248 components. This takes about a minute.

The class is wm wm-cube-tumble — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.