Word Wheel Cylinder

About this text effect

The rotating-word headline is everywhere and is usually a crossfade wearing a 3D costume. Building it as an actual cylinder takes two pieces of arithmetic and one piece of CSS plumbing. The radius is derived rather than chosen: for n faces of height h, the faces of a regular n-gon sit on a circle of radius h over two, divided by the tangent of pi over n — pick a number by eye instead and the faces overlap or leave gaps at the seams, and it breaks differently every time the word count changes. The rotation is accumulated rather than derived from the index, which is the subtler of the two: setting the angle to index times step makes the wheel spin backwards through every intermediate face at the moment the list wraps, so it looks wrong exactly once per cycle — just infrequent enough that it ships. Keeping a running total and always adding one step means it only ever turns one way, like a physical wheel. The plumbing is easy to get half right: perspective belongs on the parent of the 3D container while preserve-3d belongs on the container, and missing either flattens the children into the plane so the rotation still runs but reads as a fade. Every face needs its backface hidden, or the words on the far side show through the front ones as mirrored ghosts. The failure that costs the most time, though, is none of these: because every face is absolutely positioned, nothing inside the clipping box is in flow, so the box shrink-to-fits to zero width and hides the cylinder completely. There is no error and nothing in the console — the word simply never appears. An invisible sizing layer carrying all the words at zero height gives the box the max-content width of the widest, measured in the real font rather than guessed from a character count.