CSS 3D — Carousel & Coverflow

A ring of cards, each placed with rotateY(i × angle) translateZ(radius). Spin the whole ring the opposite way to bring any card to the front. This is the same trick as the cube — just more faces, arranged in a circle.

The 3D ring

Use Prev/Next (or arrow keys) to rotate the ring one slot at a time. The highlighted card is the one facing the camera.

card 1 / 6
6
260px
Per-card placement (card i)
transform: rotateY(60deg) translateZ(260px);
Ring rotation (to show front)
transform: translateZ(-260px) rotateY(0deg);

The angle between cards is simply 360° ÷ items. The ring is pushed back by translateZ(-radius) so the front card sits near the camera plane, not buried inside the circle.