Pure CSS Shapes & solids #loop

Exploded layers in pure CSS

Isometric plates lifting apart along the Z axis, each driven by one custom property.

  • 24 lines of CSS
  • 8 lines of HTML
  • No JavaScript
  • No dependencies
  • MIT licensed
GitHub

How it works

  1. rotateX(58deg) rotateZ(-45deg) on the parent gives the classic isometric viewing angle.
  2. All plates are stacked at the same position; only translateZ separates them.
  3. Each plate carries its index in --i, and the keyframe uses calc(var(--i) * 40px) — one animation, four different results.

Key techniques

  • rotateX + rotateZ isometric view
  • translateZ
  • var() inside @keyframes

HTML 8 lines

<div class="scene">
  <div class="layers">
    <i style="--i:0"></i>
    <i style="--i:1"></i>
    <i style="--i:2"></i>
    <i style="--i:3"></i>
  </div>
</div>

CSS 24 lines

.scene {
  perspective: 900px;
}

.layers {
  position: relative;
  width: 140px;
  height: 140px;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-45deg);
}

.layers i {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 1px solid rgb(255 255 255 / 0.35);
  background: hsl(calc(255 + var(--i) * 32) 85% 62% / 0.78);
  animation: lift 2.6s ease-in-out infinite alternate;
}

@keyframes lift {
  to { transform: translateZ(calc(var(--i) * 40px)); }
}

Sass source 23 lines

.d-layers {
  position: relative;
  width: 120px;
  height: 120px;
  transform-style: preserve-3d;
  transform: translateY(24px) rotateX(58deg) rotateZ(-45deg);

  i {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border: 1px solid rgb(255 255 255 / 0.35);
    // --i (0…3) comes from the markup; it drives both colour and lift.
    background: hsl(calc(255 + var(--i) * 32) 85% 62% / 0.78);
    animation: d-layers-lift 2.6s ease-in-out infinite alternate;
  }
}

@keyframes d-layers-lift {
  to {
    transform: translateZ(calc(var(--i) * 38px));
  }
}
Standalone snippet · plain CSS, no build step, no dependencies.

More shapes & solids

Atom orbits Exploding cube