Problem description

Given an HTML page with a <div class="carousel"> consisting of multiple <div class="carousel-item"> elements, each with an image. Write CSS to:

• Set .carousel to a fixed size (e.g., width: 400px; height: 300px;), center it, establish perspective: 1000px, and apply a spin animation rotating around Y.

• Configure .carousel with transform-style: preserve-3d to maintain 3D context.

• Style .carousel-item to be position: absolute; width: 200px; height: 150px; top: 50%; left: 50%; transform-style: preserve-3d;.

• Position each item around the ring by applying transform: rotateY(N * 60deg) translateZ(300px) translateX(-50%) translateY(-50%) for each child (where N is its zero-based index).

• Define @keyframes spin to rotate the carousel from rotateY(0deg) to rotateY(-360deg).

• Apply the spin animation to .carousel with a duration of 20s, timing function linear, and infinite iteration.

Goal

Write CSS rules to create a full 3D image carousel rotating infinitely around its vertical axis.

Constraints

• Use only CSS (no JavaScript).

• Carousel dimensions should be width: 400px; height: 300px;.

• Perspective should be 1000px on .carousel.

• Carousel transform-style should be preserve-3d.

• Number of items should be 6—each rotated by increments of 60deg around the Y-axis and translated outward by 300px.

• Each item should be centered via translate(-50%, -50%) after translation.

• Animation name should be spin.

• Animation duration should be 20s.

• Animation timing function should be linear.

• Animation iteration count should be infinite.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.