3D立方体旋转动画效果 - 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;
   }
 .container {
  perspective: 1000px;
  margin:100px;
 margin-top:300px;
}
<p>.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.001s;
}</p>
<p>.side {
position: absolute;
width: 200px;
height: 200px;
// background-sizing:cover;
// background-size:200px;
border: 1px solid black;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
}</p>
<p>.front {
background:url(https://jsmov2.a.yximgs.com/ufile/atlas/NTE5OTk2ODgyNDkwNDYyNzM0Ml8xNjg4MzU0NTIwOTMx_0.jpg) no-repeat center center;
background-size:cover;
transform: translateZ(100px);
}</p>
<p>.back {
background:url(https://jsmov2.a.yximgs.com/ufile/atlas/NTE5OTk2ODgyNDkwNDYyNzM0Ml8xNjg4MzU0NTIwOTMx_1.jpg) no-repeat center center;
background-size:cover;
transform: translateZ(-100px) rotateY(180deg);
}</p>
<p>.right {
background:url(https://jsmov2.a.yximgs.com/ufile/atlas/NTE5OTk2ODgyNDkwNDYyNzM0Ml8xNjg4MzU0NTIwOTMx_2.jpg) no-repeat center center;
background-size:cover;
transform: rotateY(-90deg) translateZ(100px);
}</p>
<p>.left {
background:url(https://jsmov2.a.yximgs.com/ufile/atlas/NTE5OTk2ODgyNDkwNDYyNzM0Ml8xNjg4MzU0NTIwOTMx_3.jpg) no-repeat center center;
background-size:cover;
transform: rotateY(90deg) translateZ(100px);
}</p>
<p>.top {
background:url(https://jsmov2.a.yximgs.com/ufile/atlas/NTE5OTk2ODgyNDkwNDYyNzM0Ml8xNjg4MzU0NTIwOTMx_4.jpg) no-repeat center center;
background-size:cover;
transform: rotateX(90deg) translateZ(100px);
}</p>
<p>.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(100px);
}
</style></p>
  </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>
<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>
<script>
//声明一个number类型的变量
var deg = 0;
var uu = 0;
var cube = document.getElementsByClassName("cube")
var container = document.getElementsByClassName("container")
//声明一个函数
function funt(i){
    deg += 0.1;
    var d = deg + "deg";
    cube[i].style.transform = `rotateX(${d}) rotateX(${d}) rotateZ(${d})`;
   container[i].style.transform = `rotateZ(${d})`;
    $("#cd").text(`我得法:${d}`);
    }
//每隔100毫秒调用一次fun函数（调整旋转速度的地方）
setInterval(function(){funt(1)},1);
</script>
  </body>
</html>