styles.css

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

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background: #f0f0f0;
  perspective: 1000px; /* This defines the 3D perspective */
}

/* Responsive styling for smaller screens */
@media (max-width: 768px) {
  .carousel {
    width: 200px;
    height: 200px;
  }
}
.carousel {
  position: relative;
  width: 300px; /* Width of the carousel */
  height: 300px; /* Height of the carousel */
  transform-style: preserve-3d; /* Preserve 3D transformations */
  animation: spin 15s infinite linear; /* Infinite rotating animation */
  transform-origin: center center; /* Ensure rotation occurs from the center */
  /* Optional, this ensures the carousel is centered */
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel .rectangle {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 10px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  box-shadow: 10px 15px 25px rgba(0, 0, 0, 0.3);
  /* Calculate angle for each rectangle */
  /* Calculate angle for each rectangle */
  /* Calculate angle for each rectangle */
  /* Calculate angle for each rectangle */
  /* Calculate angle for each rectangle */
}
.carousel .rectangle:nth-child(1) {
  background-color: rgba(255, 105, 180, 0.75); /* Assign background color */
  transform: rotateY(0deg) translateZ(150px); /* Positioning in 3D space */
}
.carousel .rectangle:nth-child(2) {
  background-color: rgba(64, 224, 208, 0.75); /* Assign background color */
  transform: rotateY(72deg) translateZ(150px); /* Positioning in 3D space */
}
.carousel .rectangle:nth-child(3) {
  background-color: rgba(138, 43, 226, 0.75); /* Assign background color */
  transform: rotateY(144deg) translateZ(150px); /* Positioning in 3D space */
}
.carousel .rectangle:nth-child(4) {
  background-color: rgba(255, 165, 0, 0.75); /* Assign background color */
  transform: rotateY(216deg) translateZ(150px); /* Positioning in 3D space */
}
.carousel .rectangle:nth-child(5) {
  background-color: rgba(75, 0, 130, 0.75); /* Assign background color */
  transform: rotateY(288deg) translateZ(150px); /* Positioning in 3D space */
}

/* Keyframe for the continuous rotating animation */
@keyframes spin {
  from {
    transform: rotateY(0deg); /* Starts from 0 degrees */
  }
  to {
    transform: rotateY(360deg); /* Rotates to 360 degrees */
  }
}

/*# sourceMappingURL=styles.css.map */