3D Ring Carousel Features Block for React

The ring is a list with transform-style: preserve-3d inside a stage with perspective. Each card is rotated by 60 degrees times its place (--i) and pushed out along z by the radius (--r); the whole ring is turned by one custom property, --turn, which is a step count. A CSS transition on transform does the turning, and there is no script frame loop.

Edit CAPABILITIES (a title and a sentence each) and the six Face entries, each of which takes its panorama overlay as children. The ring is built for six: the 60 degrees come from 360 divided by six, so another count needs that number, the radius and the DIM list changed together.

Only the front card is in the reading order and the tab order; the others are inert and hidden from assistive technology, and a polite status line reads out the new front card when the ring turns. The buttons are named "Previous capability" and "Next capability", and the left and right arrow keys turn the ring while one of them has focus, following the page direction.

The ring counts turns without wrapping, so going from the last card to the first is one more step in the same direction, never a long spin back. Which card is in front is that count taken modulo six.

The turn and the dimming transitions are off, so the ring jumps to the next card and the cards change opacity at once. Nothing plays by itself.

The cards are narrower and the radius is smaller, so the ring is the same shape at 375 pixels with its side cards just inside the frame. The buttons stay under the stage and the stage keeps its height, so nothing shifts when you turn it.