3D Cylinder Marquee

About this animation

A CSS cylinder is a dozen lines and two geometry facts. The first is the radius, which is not a design choice but a consequence: for faces of a given width arranged evenly around a circle, the circumradius of the regular polygon they form is the face width divided by twice the tangent of pi over the face count. Hard-code a number instead and the faces overlap or leave gaps the moment the word list changes length — which is exactly why most versions of this only look correct with the author's original six items. The second is where the tilt goes. A CSS animation on `transform` replaces any transform declared on the same element, so writing the rotateX tilt alongside the spinning rotateY silently discards it; the tilt has to live on a parent. Both the parent and the spinner need `preserve-3d` or the faces flatten into the plane. Edge gradients finish it, dissolving faces at the sides rather than letting them clip against the container.