Layered 3D Text Hover
A word that looks flat until you hover, when it turns in space and splits into a stack of outlined slices trailing behind it. Eight copies of the text spread along translateZ with a stagger.
Also known as: stacked layers text, exploded text slices, 3d text stack css.
Layers
HTML
<div class="hfx-layered-text-3d">
<div class="hfx-layered-text-3d-stack">
<span style="--i: 7" aria-hidden="true">Layers</span>
<span style="--i: 6" aria-hidden="true">Layers</span>
<span style="--i: 5" aria-hidden="true">Layers</span>
<span style="--i: 4" aria-hidden="true">Layers</span>
<span style="--i: 3" aria-hidden="true">Layers</span>
<span style="--i: 2" aria-hidden="true">Layers</span>
<span style="--i: 1" aria-hidden="true">Layers</span>
<span style="--i: 0">Layers</span>
</div>
</div>CSS
.hfx-layered-text-3d {
--c: var(--hfx-color, #3b82f6);
font: 900 1em system-ui, sans-serif;
font-size: var(--hfx-size, 16px);
perspective: 30em;
cursor: default;
}
.hfx-layered-text-3d-stack {
position: relative;
font-size: 3.2em;
line-height: 1.1;
letter-spacing: 0.03em;
text-transform: uppercase;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(0.3, 1.2, 0.5, 1);
}
.hfx-layered-text-3d-stack span {
position: absolute;
inset: 0;
color: transparent;
-webkit-text-stroke: 1px var(--c);
opacity: calc(1 - var(--i) * 0.1);
transform: translateZ(0);
transition: transform 0.6s cubic-bezier(0.3, 1.2, 0.5, 1);
transition-delay: calc(var(--i) * 0.025s);
}
.hfx-layered-text-3d-stack span:last-child {
position: relative;
display: block;
color: var(--c);
}
.hfx-layered-text-3d:hover .hfx-layered-text-3d-stack {
transform: rotateY(-32deg) rotateX(16deg);
}
.hfx-layered-text-3d:hover .hfx-layered-text-3d-stack span {
transform: translateZ(calc(var(--i) * -0.16em));
}
@media (prefers-reduced-motion: reduce) {
.hfx-layered-text-3d, .hfx-layered-text-3d *, .hfx-layered-text-3d::before, .hfx-layered-text-3d::after, .hfx-layered-text-3d *::before, .hfx-layered-text-3d *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.