Flip Square
No library Beginner
A gradient rounded square continuously tumbling on its Y axis using CSS 3D perspective — a satisfying single-element loader. Pure CSS, no dependencies.
A gradient rounded square continuously tumbling on its Y axis using CSS 3D perspective — a satisfying single-element loader. Pure CSS, no dependencies.
Goal: Create a "Flip Square" loader animation.
Visual behavior: A 30×30px rounded square with a purple gradient that continuously flips on its Y axis — spinning a full 360° in about 1.4s so it appears to tumble endlessly in place.
Technique: A single element with perspective applied inline in the transform. Keyframe goes 0° → 180° → 360° (full rotation) using rotateY. ease-in-out timing gives it an organic feel. Border-radius adds a soft rounded look to the square.
Accessibility: aria-label on the wrapper. Animation disabled under prefers-reduced-motion.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.