3D Rotating Cube Animation - WebCat - 常规

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>WebCat</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
<pre><code>.container {
  perspective: 50000px;
  margin: 50px;
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.cube {
  width: 10px;
  height: 10px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.001s;
  margin: 1px;
}

.side {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid black;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
}

.front {
  background: url(https://jsmov2.a.yximgs.com/ufile/atlas/NTE5OTk2ODgyNDkwNDYyNzM0Ml8xNjg4MzU0NTIwOTMx_0.jpg) no-repeat center center;
  background-size: cover;
  transform: translateZ(5px);
}

.back {
  background: url(https://jsmov2.a.yximgs.com/ufile/atlas/NTE5OTk2ODgyNDkwNDYyNzM0Ml8xNjg4MzU0NTIwOTMx_1.jpg) no-repeat center center;
  background-size: cover;
  transform: translateZ(-5px) rotateY(180deg);
}

.right {
  background: url(https://jsmov2.a.yximgs.com/ufile/atlas/NTE5OTk2ODgyNDkwNDYyNzM0Ml8xNjg4MzU0NTIwOTMx_2.jpg) no-repeat center center;
  background-size: cover;
  transform: rotateY(-90deg) translateZ(-5px);
}

.left {
  background: url(https://jsmov2.a.yximgs.com/ufile/atlas/NTE5OTk2ODgyNDkwNDYyNzM0Ml8xNjg4MzU0NTIwOTMx_3.jpg) no-repeat center center;
  background-size: cover;
  transform: rotateY(90deg) translateZ(5px);
}

.top {
  background: url(https://jsmov2.a.yximgs.com/ufile/atlas/NTE5OTk2ODgyNDkwNDYyNzM0Ml8xNjg4MzU0NTIwOTMx_4.jpg) no-repeat center center;
  background-size: cover;
  transform: rotateX(90deg) translateZ(5px);
}

.bottom {
  background: url(https://p3-sign.douyinpic.com/obj/douyin-user-image-file/aca64a6b4e5bbcd6f1092c5696dcb6b4?x-expires=1688374800&amp;x-signature=%2B36b%2BgdPV%2BQ7FOjoUUnGo9RujDg%3D&amp;from=2064092626) no-repeat center center;
  background-size: cover;
  transform: rotateX(-90deg) translateZ(5px);
}
</code></pre>
  </style>
</head>
<body>
<p id="cd">我得法:0deg</p>
<div class="container">
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side right"></div>
    <div class="side left"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
</div>
<script>
  var deg = 0;
  var cube = document.getElementsByClassName("cube");
<p>function animate() {
deg += 0.1;
var d = deg + &quot;deg&quot;;
for (var i = 0; i &lt; cube.length; i++) {
cube[i].style.transform = <code>rotateX(${d}) rotateX(${d}) rotateZ(${d})</code>;
}
$(&quot;#cd&quot;).text(<code>我得法:${d}</code>);
requestAnimationFrame(animate);
}</p>
<p>animate();
</script></p>
</body>
</html>