3D Cylinder Ring Carousel

Colours in this gradient

• #020617
• #3b82f6
• #8b5cf6
• #ec4899

The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="cyl-stage">
  <div class="cyl-ring">
    <div class="cyl-card cc-1"><span>01</span><b>AI Models</b></div>
    <div class="cyl-card cc-2"><span>02</span><b>Edge DB</b></div>
    <div class="cyl-card cc-3"><span>03</span><b>Pipelines</b></div>
    <div class="cyl-card cc-4"><span>04</span><b>Telemetry</b></div>
    <div class="cyl-card cc-5"><span>05</span><b>Security</b></div>
    <div class="cyl-card cc-6"><span>06</span><b>Analytics</b></div>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same 3d scene, then ask it to adapt the colours, text or framework to your project.

Create a 3D cylindrical carousel drum with 6 radially arranged card panels in HTML and CSS.

Requirements:
- 6 cards spaced at 60-degree intervals: rotateY(n * 60deg) translateZ(240px).
- Continuous 360-degree rotateY animation with -10deg pitch tilt.
- Hover pauses rotation (animation-play-state: paused).
- Distinct color themes on each panel.
- Zero JavaScript.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Set perspective on container and preserve-3d on the central ring element.

2. 2

   Calculate translateZ = width / (2 * tan(PI / 6)) to position cards radially without overlaps.

3. 3

   Animate rotateY from 0 to 360 degrees.

Customisation tips

• Setting animation-play-state: paused on hover lets users inspect individual cards.

More 3d scenes