CSS AdvancedLesson #138

3D Carousel

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

CSS - A Rotating 3D Carousel

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

1 2 3 4 5 6

The HTML Structure

Let's start with the basic HTML structure:

Example

Example Code

html

Try it Yourself

Live Output Preview:

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;

Example

Example Code

css

Try it Yourself

: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:

Example

Example Code

css

Try it Yourself

.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:

Example

Example Code

css

Try it Yourself

.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:

Example

Example Code

css

Try it Yourself

.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:

Example

Example Code

css

Try it Yourself

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

  }

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

Example

Example Code

css

Try it Yourself

.carousel:hover {

  animation-play-state: paused;
}

Full Example of Rotating 3D Carousel

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

Example

Example Code

css

Try it Yourself

: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;
}