.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.inner {
  --w: 100px;
  --h: 150px;
  --translateZ: calc((var(--w) + var(--h)) + 0px);
  --rotateX: -15deg;
  --perspective: 1000px;
  position: absolute;
  width: var(--w);
  height: var(--h);
  top: 25%;
  left: calc(50% - (var(--w) / 2) - 2.5px);
  z-index: 2;
  transform-style: preserve-3d;
  transform: perspective(var(--perspective));
  animation: rotating 20s linear infinite; /* */
}
@keyframes rotating {
  from {
    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
      rotateY(0);
  }
  to {
    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
      rotateY(1turn);
  }
}

.card {
  position: absolute;
  border: 2px solid rgba(var(--color-card));
  border-radius: 12px;
  overflow: hidden;
  inset: 0;
  transform: rotateY(calc((360deg / var(--quantity)) * var(--index)))
    translateZ(var(--translateZ));
}

.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0000
    radial-gradient(
      circle,
      rgba(var(--color-card), 0.2) 0%,
      rgba(var(--color-card), 0.6) 80%,
      rgba(var(--color-card), 0.9) 100%
    );
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

3D Rotating Card Carousel Using HTML & CSS

Creating stunning visual effects using just HTML and CSS is more achievable than ever. In this tutorial, we explore how to build a 3D rotating card carousel with no JavaScript required. This visually engaging effect is perfect for showcasing image galleries, portfolios, or even product slideshows.

What This Code Does

This layout presents ten color-themed cards arranged in a circle. These cards continuously rotate around the Y-axis, creating a 3D carousel animation. Each card uses a radial gradient background, offering a glowing, soft visual based on its unique color code.

Key Features

1. 3D Perspective and Rotation

The perspective() and rotateY() CSS functions combine to give each card depth, making them appear as if they’re rotating in three-dimensional space.

The parent .inner element is animated with @keyframes rotating, which applies a smooth 360-degree spin.
The preserve-3d property keeps all child elements in 3D space throughout the animation.

2. CSS Variables for Dynamic Layout

The design is built on custom properties (--w, --h, --color-card, --quantity, and more), making it easy to:

Adjust the number of cards
Change colors
Scale the size of the cards

This setup makes the carousel highly customizable for different design needs.

3. Circular Distribution of Cards

Each .card is positioned using the rotateY() transformation, calculated based on the card’s index and the total number of cards. This results in a perfect circular arrangement that rotates around the vertical axis.

4. Glowing Card Backgrounds

Each .card features a gradient background built using the rgba() values defined by the --color-card property. This gradient gives a glowing, soft appearance that feels modern and interactive.

Use Cases for This 3D Carousel

This type of animation is ideal for:

Image portfolios
Landing pages with product cards
Creative web galleries
Tech showcases
Interactive presentations

Learn by Doing – Practice on Our Free Tool

If you’re using the Learn Code Online Free Of Cost platform, you can:

Edit and customize the code live
Change the number of cards or their colors
Watch real-time results in the preview section

Hands-on learning with real code examples helps you grasp advanced CSS concepts faster.

Final Thoughts

This 3D card carousel demonstrates how powerful and creative modern CSS can be. By using only HTML and CSS, you can achieve smooth 3D effects and interactive layouts suitable for any modern web design project. It’s also fully responsive and lightweight — a great addition to your UI toolbox.

This code uses HTML and CSS only — no JavaScript included.

MIT License

Permission is freely granted to anyone who obtains a copy of this software and its accompanying documentation files (referred to as “the Software”), allowing them to use, copy, modify, merge, publish, distribute, sublicense, and even sell copies of the Software. Additionally, users are allowed to permit others to use the Software under these same terms.

It is required that the above copyright notices and this permission notice be included in all versions or significant portions of the Software.

Please note, the Software is provided “as is”, without any form of warranty—express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a specific purpose, or non-infringement. Under no circumstances shall the original authors or rights holders be held responsible for any claims, damages, or other liabilities that may arise from the use of the Software, whether through legal action, negligence, or otherwise.

All code on Freeofcosts.com is reviewed before publishing. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.