Anamorphic 3D Text Illusion
Letters float at very different depths and only line up into a word from one angle. The view swings through that angle, so the word forms and scatters again. Each letter is scaled to cancel its depth.
Also known as: perspective illusion text, split depth text css, 3d scattered letters.
HTML
<div class="txt-anamorphic-3d-text" aria-label="ILLUSION"><span class="txt-anamorphic-3d-text-scene" aria-hidden="true"><span style="--o: -3.5; --z: 2.2">I</span><span style="--o: -2.5; --z: -2.6">L</span><span style="--o: -1.5; --z: 1.2">L</span><span style="--o: -0.5; --z: -1.6">U</span><span style="--o: 0.5; --z: 2.6">S</span><span style="--o: 1.5; --z: -2.2">I</span><span style="--o: 2.5; --z: 0.6">O</span><span style="--o: 3.5; --z: -1.2">N</span></span></div>
CSS
.txt-anamorphic-3d-text {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 1.5);
font-family: system-ui, sans-serif;
font-weight: 800;
line-height: 1.2;
display: inline-block;
perspective: 8em;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--c);}
.txt-anamorphic-3d-text-scene {
display: flex;
transform-style: preserve-3d;
animation: txt-anamorphic-3d-text-swing 3.4s cubic-bezier(0.65, 0, 0.35, 1) -1.4s infinite alternate; /* starts lined up */
}
/*
* --z is each letter's depth in em. Seen from straight on (perspective 8em),
* scale(1 - z/8) cancels the size change and the translateX cancels the
* drift away from the middle, so the letters line up; --o is the letter's
* slot from the middle, 0.62em wide.
*/
.txt-anamorphic-3d-text-scene span {
display: block;
width: 0.62em;
text-align: center;
transform:
translateX(calc(var(--o) * var(--z) * -0.62em / 8))
translateZ(calc(var(--z) * 1em))
scale(calc(1 - var(--z) / 8));
}
@keyframes txt-anamorphic-3d-text-swing {
0% { transform: rotateX(14deg) rotateY(-42deg); }
40%, 60% { transform: rotateX(0deg) rotateY(0deg); }
100% { transform: rotateX(-10deg) rotateY(42deg); }
}
@media (prefers-reduced-motion: reduce) {
.txt-anamorphic-3d-text, .txt-anamorphic-3d-text *, .txt-anamorphic-3d-text::before, .txt-anamorphic-3d-text::after, .txt-anamorphic-3d-text *::before, .txt-anamorphic-3d-text *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--txt-coloron the element or a parent. Currently previewing#3b82f6. - Font size: set
--txt-size. Every other dimension is inem, so the whole thing scales together. Currently previewing40px. - 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.