25 CSS Spinners 11 / 25

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.

Pure CSS MIT licensed
Live Demo Open in tab

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

Open in playground

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}
}

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.

Customize

  • 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.

Watch out for

  • 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.

More from 25 CSS Spinners

Matrix Rain Column SpinnerAurora Gradient Orb SpinnerNeon Arc CSS SpinnerDual Counter-Rotate Ring SpinnerDot Chase Orbit SpinnerGradient Conic Sweep SpinnerHeartbeat Pulse LoaderWave Bar Equalizer SpinnerStacked Ring Helix SpinnerMorph Square-to-Circle SpinnerComet Trail CSS SpinnerDNA Double Helix Spinner
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →