CSS 3D Transforms - 3D Carousel

CSS - A Rotating 3D Carousel

Here we demonstrate how to make another classic 3D object: A rotating carousel.

The HTML Structure

Let's start with the basic HTML structure:

The container element will house the 3D space. The carousel element acts as the 3D object. Six separate card elements are used for the six items of the carousel.

The CSS Styling

First, we define some variables in the :root element. We create some custom variables for width, height, and total items. Here, the carousel will have six card items. We also have to calculate the radius.

The radius has the following formula: radius = (width / 2) / tan(360 / quantity / 2).

For 6 card items of 200px width: (200 / 2) / tan(360 / 6 / 2) = 100 / 0.577 = ~173px. We set --radius to 173px;

Next, we define the 3D container box: Apply perspective, along with height, width and margin:

Now the carousel element can be transformed in its container's 3D space. We add width: 100%; and height: 100%;. The position: relative is used to position the cards absolutely. The transform-style: preserve-3d is essential here. It forces child elements into 3D space. Without this, the cards flatten into a 2D sheet. We also add a CSS animation, to trigger continuous rotation of the carousel:

Then, we add some base styling for all six cards. To position the cards in 3D space, we will need to reset their positions in 2D with position: absolute:. Then we use rotateY() to rotate each card, and translateZ() to push it out to form the cylinder edge:

Then, we create the keyframe animation to rotate the carousel:

At the end, we create a pause on hover for easier viewing:

Full Example of Rotating 3D Carousel

Here is the full example of the rotating 3D carousel: