GeezerVison

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;

:root {
--card-width: 200px;
--card-height: 300px;
--total-items: 6;
--radius: 173px; /* Calculated radius for 6 cards */
}

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

.container {
width: var(--card-width);
height: var(--card-height);
margin: 80px auto;
perspective: 1000px;
}

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:

.carousel {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: spin 20s infinite linear;
}

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:

.card {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(to bottom, red, yellow);
color: white;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
transform:
rotateY(calc(var(--index) * (360deg / var(--total-items))))
translateZ(var(--radius));
}

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

@keyframes spin {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}

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

.carousel:hover {
animation-play-state: paused;
}

Full Example of Rotating 3D Carousel

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

Example

:root {
--card-width: 200px;
--card-height: 200px;
--total-items: 6;
--radius: 173px; /* Calculated radius for 6 cards */
}

.container {
width: var(--card-width);
height: var(--card-height);
margin: 80px auto;
perspective: 1000px;
}

.carousel {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: spin 20s infinite linear;
}

.card {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(to bottom, red, yellow);
color: white;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
transform:
rotateY(calc(var(--index) * (360deg / var(--total-items))))
translateZ(var(--radius));
}

@keyframes spin {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}

.carousel:hover {
animation-play-state: paused;
}

Try it Yourself »

❮ Previous Next ❯

★ +1

W3Schools Full Access - your next career move

REMOVE ADS

Learn more about Adventure Mode›

Free account

Track your progress

XP earned 0 Day streak 0 Spaces 0 League —

New

Learn in Adventure Mode W3Schools Adventure App

Coding fundamentals as bite-sized lessons and challenges.

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

   

FORUM ABOUT CAMPUS

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookies and privacy policy.

Copyright 1999-2026 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.

GeezerVison

CSS Tutorial

CSS Advanced

CSS Flexbox

CSS Grid

CSS Responsive

CSS Cert

CSS SASS

CSS Examples

CSS References

CSS 3D Transforms - 3D Carousel

CSS - A Rotating 3D Carousel

The HTML Structure

The CSS Styling

Full Example of Rotating 3D Carousel

Example

Track your progress

Learn in Adventure Mode W3Schools Adventure App

Contact Sales

Report Error

Top Tutorials

Top References

Top Examples

Get Certified