* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #0f172a;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Scene gives perspective */
.scene {
  width: 300px;
  height: 200px;
  perspective: 1000px;
}

/* Carousel container */
.carousel {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 20s infinite linear;
}

/* Images */
.carousel img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* Position each image in a circle */
.carousel img:nth-child(1) { transform: rotateY(0deg) translateZ(400px); }
.carousel img:nth-child(2) { transform: rotateY(60deg) translateZ(400px); }
.carousel img:nth-child(3) { transform: rotateY(120deg) translateZ(400px); }
.carousel img:nth-child(4) { transform: rotateY(180deg) translateZ(400px); }
.carousel img:nth-child(5) { transform: rotateY(240deg) translateZ(400px); }
.carousel img:nth-child(6) { transform: rotateY(300deg) translateZ(400px); }
.carousel img:nth-child(7) { transform: rotateY(300deg) translateZ(400px); }
.carousel img:nth-child(8) { transform: rotateY(300deg) translateZ(400px); }
.carousel img:nth-child(9) { transform: rotateY(300deg) translateZ(400px); }
.carousel img:nth-child(10) { transform: rotateY(300deg) translateZ(400px); }
.carousel img:nth-child(12) { transform: rotateY(300deg) translateZ(400px); }


/* Rotation animation */
@keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}