Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: 3D Rotating Image Carousel

Solution: 3D Rotating Image Carousel

Let’s build a 3D rotating image carousel with items arranged in a circular ring using only CSS transforms and animations.

We'll cover the following...

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