3D Rotating Text Cylinder
Letters wrap around an invisible 3D drum that turns slowly, with the far side showing through faintly in mirror image. Each letter is turned around the Y axis and pushed out with translateZ.
Also known as: 3d text ring css, text rotating around cylinder, circular 3d text spin.
HTML
<div class="txt-3d-text-cylinder" aria-label="All around"><div class="txt-3d-text-cylinder-ring" aria-hidden="true"><span class="txt-3d-text-cylinder-back"><span style="--i: 0">A</span><span style="--i: 1">L</span><span style="--i: 2">L</span><span style="--i: 3"> </span><span style="--i: 4">A</span><span style="--i: 5">R</span><span style="--i: 6">O</span><span style="--i: 7">U</span><span style="--i: 8">N</span><span style="--i: 9">D</span><span style="--i: 10"> </span><span style="--i: 11">·</span><span style="--i: 12"> </span><span style="--i: 13">A</span><span style="--i: 14">L</span><span style="--i: 15">L</span><span style="--i: 16"> </span><span style="--i: 17">A</span><span style="--i: 18">R</span><span style="--i: 19">O</span><span style="--i: 20">U</span><span style="--i: 21">N</span><span style="--i: 22">D</span><span style="--i: 23"> </span><span style="--i: 24">·</span><span style="--i: 25"> </span></span><span class="txt-3d-text-cylinder-front"><span style="--i: 0">A</span><span style="--i: 1">L</span><span style="--i: 2">L</span><span style="--i: 3"> </span><span style="--i: 4">A</span><span style="--i: 5">R</span><span style="--i: 6">O</span><span style="--i: 7">U</span><span style="--i: 8">N</span><span style="--i: 9">D</span><span style="--i: 10"> </span><span style="--i: 11">·</span><span style="--i: 12"> </span><span style="--i: 13">A</span><span style="--i: 14">L</span><span style="--i: 15">L</span><span style="--i: 16"> </span><span style="--i: 17">A</span><span style="--i: 18">R</span><span style="--i: 19">O</span><span style="--i: 20">U</span><span style="--i: 21">N</span><span style="--i: 22">D</span><span style="--i: 23"> </span><span style="--i: 24">·</span><span style="--i: 25"> </span></span></div></div>
CSS
.txt-3d-text-cylinder {
--c: var(--txt-color, #3b82f6);
font-size: calc(var(--txt-size, 32px) * 1.2);
font-family: system-ui, sans-serif;
font-weight: 800;
line-height: 1.2;
display: inline-block;
perspective: 14em;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
color: var(--c);}
.txt-3d-text-cylinder-ring {
position: relative;
width: 0.62em;
height: 1.2em;
transform-style: preserve-3d;
animation: txt-3d-text-cylinder-spin 16s linear infinite;
}
.txt-3d-text-cylinder-back,
.txt-3d-text-cylinder-front {
position: absolute;
inset: 0;
transform-style: preserve-3d;
}
/* 26 letters, 360 / 26 degrees apart, 2.6em from the axis */
.txt-3d-text-cylinder-ring span span {
position: absolute;
inset: 0;
text-align: center;
transform: rotateY(calc(var(--i) * 360deg / 26)) translateZ(2.6em);
}
.txt-3d-text-cylinder-front span {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* a faint copy just inside the ring shows its back through the far side */
.txt-3d-text-cylinder-back span {
color: color-mix(in srgb, var(--c) 30%, transparent);
transform: rotateY(calc(var(--i) * 360deg / 26)) translateZ(2.56em);
}
@keyframes txt-3d-text-cylinder-spin {
from { transform: rotateX(-12deg) rotateY(0deg); }
to { transform: rotateX(-12deg) rotateY(-360deg); }
}
@media (prefers-reduced-motion: reduce) {
.txt-3d-text-cylinder, .txt-3d-text-cylinder *, .txt-3d-text-cylinder::before, .txt-3d-text-cylinder::after, .txt-3d-text-cylinder *::before, .txt-3d-text-cylinder *::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.