css3 3d 立体效果

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="box">
      <div class="card one">1</div>
      <div class="card two">2</div>
      <div class="card three">3</div>
      <div class="card four">4</div>
      <div class="card five">5</div>
      <div class="card six">6</div>
    </div>
  </body>
</html>

CSS

body {
  margin: 0;
  font-size: 2rem;
  text-transform: capitalize;
  perspective: 800px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  transform: rotateY(45deg) rotateX(-30deg);
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
  transform-origin: 50% 50% -100px;
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateX(0deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(360deg);
  }
}
.card {
  width: 200px;
  height: 200px;
  font-size: 10rem;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  opacity: 0.6;
}

.one {
  background-color: #f00;
}
.two {
  background-color: #0f0;
  transform: translateZ(-200px);
}
.three {
  background-color: #00f;
  transform: rotateY(90deg) translateX(100px) translateZ(100px);
}
.four {
  background-color: #ff0;
  transform: rotateY(90deg) translateX(100px) translateZ(-100px);
}
.five {
  background-color: #0ff;
  transform: rotateX(90deg) translateY(-100px) translateZ(100px);
}
.six {
  background-color: #f0f;
  transform: rotateX(90deg) translateY(-100px) translateZ(-100px);
}