Problem description

Given HTML markup with a .carousel container housing a .carousel-inner and multiple .carousel-item elements, write CSS to:

• Apply a 3D perspective to .carousel.

• Use transform-style: preserve-3d on .carousel-inner and animate it rotating around the Y-axis infinitely.

• Position each .carousel-item around a circle using rotateY(...) translateZ(...), calculating angles via CSS variables or nth-child selectors.

• Pause the spin animation when the user hovers over the carousel.

• Style each item as a glassmorphic card: semi-transparent background, backdrop-filter: blur(10px), rounded corners, and subtle shadow for depth.

Goal

Write all necessary CSS rules, including keyframes, custom properties, 3D transforms, and glassmorphic styling, to produce a performant, auto-rotating 3D carousel that pauses on hover.

Constraints

• Use only CSS (no JavaScript).

• .carousel must have perspective: 1000px;.

• .carousel-inner must use transform-style: preserve-3d; and animation: spin 20s linear infinite;.

• Use @keyframes spin rotating from rotateY(0deg) to rotateY(-360deg).

• Arrange six items: use nth-child(1) to (6) setting angles at multiples of 60deg and translateZ(300px).

• Pause animation on .carousel:hover .carousel-inner via animation-play-state: paused;.

• .carousel-item dimensions should be 200px width and 250px height.

• Glass style should be background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border-radius: 12px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);.

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.