25 CSS Spinners11 / 25

Pure CSSMIT licensed

Folding Cube Grid Spinner

A 3×3 grid of teal cubes each flip through two 90° rotation axes in sequence with staggered delays, creating a cascading wave of 3D folding tiles.

Published

Live Demo
Try it

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

The code

<div class="sp-11">
  <div class="sp-11__grid">
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
  </div>
</div>
.sp-11,
.sp-11 *,
.sp-11 *::before,
.sp-11 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sp-11 {
  --bg: #0a0a0a;
  --c: #64ffda;
  --glow: rgba(100,255,218,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}

.sp-11__grid {
  display: grid;
  grid-template-columns: repeat(3,22px);
  grid-template-rows: repeat(3,22px);
  gap: 4px;
}

.sp-11__cube {
  width: 22px;
  height: 22px;
  background: var(--c);
  box-shadow: 0 0 8px var(--glow);
  border-radius: 2px;
  animation: sp-11-fold 1.8s ease-in-out infinite;
}

.sp-11__cube:nth-child(1) {
  animation-delay: 0s;
}

.sp-11__cube:nth-child(2) {
  animation-delay: 0.1s;
}

.sp-11__cube:nth-child(3) {
  animation-delay: 0.2s;
}

.sp-11__cube:nth-child(4) {
  animation-delay: 0.3s;
}

.sp-11__cube:nth-child(5) {
  animation-delay: 0.4s;
}

.sp-11__cube:nth-child(6) {
  animation-delay: 0.5s;
}

.sp-11__cube:nth-child(7) {
  animation-delay: 0.6s;
}

.sp-11__cube:nth-child(8) {
  animation-delay: 0.7s;
}

.sp-11__cube:nth-child(9) {
  animation-delay: 0.8s;
}

@keyframes sp-11-fold {
  0%,
    100% {
    transform: perspective(60px) rotateX(0deg) rotateY(0deg);
    opacity: 1;
  }

  33% {
    transform: perspective(60px) rotateX(-90deg) rotateY(0deg);
    opacity: 0.4;
  }

  66% {
    transform: perspective(60px) rotateX(-90deg) rotateY(90deg);
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-11__cube {
    animation: none;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Spinner from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Folding Cube Grid Spinner
Source: https://codefronts.com/motion/css-spinner-designs/folding-cube-grid-spinner/

A 3×3 grid of teal cubes each flip through two 90° rotation axes in sequence with staggered delays, creating a cascading wave of 3D folding tiles.
## HTML
```html
<div class="sp-11">
  <div class="sp-11__grid">
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
    <div class="sp-11__cube"></div>
  </div>
</div>
```
## CSS
```css
.sp-11,
.sp-11 *,
.sp-11 *::before,
.sp-11 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.sp-11 {
  --bg: #0a0a0a;
  --c: #64ffda;
  --glow: rgba(100,255,218,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--bg);
}

.sp-11__grid {
  display: grid;
  grid-template-columns: repeat(3,22px);
  grid-template-rows: repeat(3,22px);
  gap: 4px;
}

.sp-11__cube {
  width: 22px;
  height: 22px;
  background: var(--c);
  box-shadow: 0 0 8px var(--glow);
  border-radius: 2px;
  animation: sp-11-fold 1.8s ease-in-out infinite;
}

.sp-11__cube:nth-child(1) {
  animation-delay: 0s;
}

.sp-11__cube:nth-child(2) {
  animation-delay: 0.1s;
}

.sp-11__cube:nth-child(3) {
  animation-delay: 0.2s;
}

.sp-11__cube:nth-child(4) {
  animation-delay: 0.3s;
}

.sp-11__cube:nth-child(5) {
  animation-delay: 0.4s;
}

.sp-11__cube:nth-child(6) {
  animation-delay: 0.5s;
}

.sp-11__cube:nth-child(7) {
  animation-delay: 0.6s;
}

.sp-11__cube:nth-child(8) {
  animation-delay: 0.7s;
}

.sp-11__cube:nth-child(9) {
  animation-delay: 0.8s;
}

@keyframes sp-11-fold {
  0%,
    100% {
    transform: perspective(60px) rotateX(0deg) rotateY(0deg);
    opacity: 1;
  }

  33% {
    transform: perspective(60px) rotateX(-90deg) rotateY(0deg);
    opacity: 0.4;
  }

  66% {
    transform: perspective(60px) rotateX(-90deg) rotateY(90deg);
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-11__cube {
    animation: none;
  }
}
```

How this works

Nine identical square tiles are laid out in a CSS Grid. Each tile runs the same sp-11-fold keyframe which animates perspective(60px) rotateX from 0° to -90° in the first third, then adds rotateY(90deg) in the second third, ending with the tile back at full visibility — simulating a double-fold motion like a paper flap.

Each tile's animation-delay increases by 0.1s from left-to-right, top-to-bottom, so the fold cascades diagonally across the grid. The opacity drop to 0.4 during mid-fold enhances the 3D depth illusion by mimicking a backface shadow.

Make it yours

  • Change tile colour and glow via --c and --glow — an amber/dark-gold palette gives a metallic coin flip appearance.
  • Adjust the perspective depth from 60px to 30px for a more extreme 3D foreshortening effect.
  • Change the grid layout to 2×2 (4 tiles) or 4×4 (16 tiles) by adjusting the grid columns/rows and populating the matching number of .sp-11__cube elements.
  • Add border-radius:4px to tiles and increase gap to 6px for a softer, card-deck flip aesthetic.
  • Use animation-timing-function:cubic-bezier(0.36,0.07,0.19,0.97) to add a spring overshoot to each fold.

Gotchas — read before shipping

  • The perspective() in the transform function list is per-element perspective — for consistent depth across all 9 tiles, a shared perspective property on a parent container gives more uniform results.
  • At animation-duration:1.8s with 9 tiles, the total delay spread is 0.8s, leaving a visible gap before the cycle restarts — reduce duration or increase overlap by shortening delays to 0.07s steps if the gap is undesirable.
  • The fold uses rotateX then rotateY in the same transform stack — order matters in CSS transforms and reversing them produces a different fold axis.

Browser support

ChromeSafariFirefoxEdge
60+12+60+60+

CSS 3D transforms with per-element perspective are well-supported; no prefixes required.

Techniques used in this demo

3D transforms (perspective + preserve-3d)grid-templateMDN ↗@keyframesMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →