Search⌘ K
Home
Courses
Grokking CSS Design Patterns to Ace Interviews

Glass 3D Carousel

Explore how to craft a 3D rotating carousel styled with glassmorphism purely using CSS. Learn to apply 3D perspective, animate carousel items around the Y-axis, and implement semi-transparent blurred backgrounds with rounded corners and shadows. This lesson equips you to create visually appealing, interactive UI components without JavaScript, emphasizing reusable CSS patterns for performance and accessibility.

We'll cover the following...

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