Cube Spin

How it works

Cube Spin is an animated 3d & depth text effect rendered entirely in CSS. Each character is wrapped in its own span so it can animate independently — the HTML and JSX exports include that per-letter markup.

Controls

Cube Spin exposes 3 dedicated controls — Tumble, Side Tint and Stagger — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.

CSS

/* Cube Spin — made with TEXT-FX · https://text-fx.app
 * HTML: each character is wrapped in a <span> — see the HTML export.
 * Font: 'Syne', sans-serif (load from Google Fonts).
 */

.text-effect {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: none;
}

.text-effect {
  color: hsl(183 22% 96%);
  white-space: pre;
  perspective: 1000px;
  perspective-origin: 50% 45%;
}
.text-effect .fx-gap {
  display: inline-block;
}
.text-effect .fx-cube {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  transform-style: preserve-3d;
  will-change: transform;
  animation: text-effect-drum 6.2s cubic-bezier(0.5, 0.05, 0.35, 1.1) infinite;
  animation-delay: calc(var(--i) * -133ms);
}
.text-effect .fx-face {
  color: hsl(183 22% 96%);
  line-height: 1;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation: text-effect-light 6.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -133ms + (var(--k) - 4) * 1.55s);
}
.text-effect .fx-front {
  position: relative;
  display: inline-flex;
  transform: rotateX(0deg) translateZ(0.5em);
}
.text-effect .fx-top,
.text-effect .fx-back,
.text-effect .fx-bottom {
  position: absolute;
  inset: 0;
  display: flex;
}
.text-effect .fx-top { transform: rotateX(90deg) translateZ(0.5em); }
.text-effect .fx-back { transform: rotateX(180deg) translateZ(0.5em); }
.text-effect .fx-bottom { transform: rotateX(270deg) translateZ(0.5em); }

@keyframes text-effect-drum {
  0%, 19% { transform: rotateX(0deg); }
  25%, 44% { transform: rotateX(-90deg); }
  50%, 69% { transform: rotateX(-180deg); }
  75%, 94% { transform: rotateX(-270deg); }
  100% { transform: rotateX(-360deg); }
}
@keyframes text-effect-light {
  0%, 19% { color: hsl(183 22% 96%); opacity: 1; }
  50% { color: hsl(183 78% 62%); opacity: 0.36; }
  94%, 100% { color: hsl(183 22% 96%); opacity: 1; }
}

HTML

This effect needs the markup below (per-letter spans, SVG defs, or a data-text attribute).

<!-- Made with TEXT-FX · https://text-fx.app -->

<style>
.text-effect {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: none;
}

.text-effect {
  color: hsl(183 22% 96%);
  white-space: pre;
  perspective: 1000px;
  perspective-origin: 50% 45%;
}
.text-effect .fx-gap {
  display: inline-block;
}
.text-effect .fx-cube {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  transform-style: preserve-3d;
  will-change: transform;
  animation: text-effect-drum 6.2s cubic-bezier(0.5, 0.05, 0.35, 1.1) infinite;
  animation-delay: calc(var(--i) * -133ms);
}
.text-effect .fx-face {
  color: hsl(183 22% 96%);
  line-height: 1;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation: text-effect-light 6.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * -133ms + (var(--k) - 4) * 1.55s);
}
.text-effect .fx-front {
  position: relative;
  display: inline-flex;
  transform: rotateX(0deg) translateZ(0.5em);
}
.text-effect .fx-top,
.text-effect .fx-back,
.text-effect .fx-bottom {
  position: absolute;
  inset: 0;
  display: flex;
}
.text-effect .fx-top { transform: rotateX(90deg) translateZ(0.5em); }
.text-effect .fx-back { transform: rotateX(180deg) translateZ(0.5em); }
.text-effect .fx-bottom { transform: rotateX(270deg) translateZ(0.5em); }

@keyframes text-effect-drum {
  0%, 19% { transform: rotateX(0deg); }
  25%, 44% { transform: rotateX(-90deg); }
  50%, 69% { transform: rotateX(-180deg); }
  75%, 94% { transform: rotateX(-270deg); }
  100% { transform: rotateX(-360deg); }
}
@keyframes text-effect-light {
  0%, 19% { color: hsl(183 22% 96%); opacity: 1; }
  50% { color: hsl(183 78% 62%); opacity: 0.36; }
  94%, 100% { color: hsl(183 22% 96%); opacity: 1; }
}
</style>

<div class="text-effect"><span class="fx-cube" style="--i:0"><span class="fx-face fx-front" style="--k:0">Y</span><span class="fx-face fx-top" style="--k:1">Y</span><span class="fx-face fx-back" style="--k:2">Y</span><span class="fx-face fx-bottom" style="--k:3">Y</span></span><span class="fx-cube" style="--i:1"><span class="fx-face fx-front" style="--k:0">o</span><span class="fx-face fx-top" style="--k:1">o</span><span class="fx-face fx-back" style="--k:2">o</span><span class="fx-face fx-bottom" style="--k:3">o</span></span><span class="fx-cube" style="--i:2"><span class="fx-face fx-front" style="--k:0">u</span><span class="fx-face fx-top" style="--k:1">u</span><span class="fx-face fx-back" style="--k:2">u</span><span class="fx-face fx-bottom" style="--k:3">u</span></span><span class="fx-cube" style="--i:3"><span class="fx-face fx-front" style="--k:0">r</span><span class="fx-face fx-top" style="--k:1">r</span><span class="fx-face fx-back" style="--k:2">r</span><span class="fx-face fx-bottom" style="--k:3">r</span></span><span class="fx-cube" style="--i:4"><span class="fx-face fx-front" style="--k:0"> </span><span class="fx-face fx-top" style="--k:1"> </span><span class="fx-face fx-back" style="--k:2"> </span><span class="fx-face fx-bottom" style="--k:3"> </span></span><span class="fx-cube" style="--i:5"><span class="fx-face fx-front" style="--k:0">t</span><span class="fx-face fx-top" style="--k:1">t</span><span class="fx-face fx-back" style="--k:2">t</span><span class="fx-face fx-bottom" style="--k:3">t</span></span><span class="fx-cube" style="--i:6"><span class="fx-face fx-front" style="--k:0">e</span><span class="fx-face fx-top" style="--k:1">e</span><span class="fx-face fx-back" style="--k:2">e</span><span class="fx-face fx-bottom" style="--k:3">e</span></span><span class="fx-cube" style="--i:7"><span class="fx-face fx-front" style="--k:0">x</span><span class="fx-face fx-top" style="--k:1">x</span><span class="fx-face fx-back" style="--k:2">x</span><span class="fx-face fx-bottom" style="--k:3">x</span></span><span class="fx-cube" style="--i:8"><span class="fx-face fx-front" style="--k:0">t</span><span class="fx-face fx-top" style="--k:1">t</span><span class="fx-face fx-back" style="--k:2">t</span><span class="fx-face fx-bottom" style="--k:3">t</span></span></div>

Related 3D & Depth effects

• 3D Extrude
• Isometric 3D
• Long Shadow
• Retro 3D
• Paper Cutout