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;}
body{}
.container{perspective:1000px;margin:100px;margin-top:300px;}
.cube{width:200px;height:200px;position:relative;transform-style:preserve-3d;transition:transform 0.001s;}
.side{position:absolute;width:200px;height:200px;border:1px solid black;box-sizing:border-box;display:flex;justify-content:center;align-items:center;font-size:30px;}
.front{background:url(https://jsmov2.a.yximgs.com/ufile/atlas/NTE5OTk2ODgyNDkwNDYyNzM0Ml8xNjg4MzU0NTIwOTMx_0.jpg) no-repeat center center;background-size:cover;transform:translateZ(100px);}
.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);}
.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);}
.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);}
.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);}
.bottom{background:url(https://p3-sign.douyinpic.com/obj/douyin-user-image-file/aca64a6b4e5bbcd6f1092c5696dcb6b4?x-expires=1688374800&x-signature=%2B36b%2BgdPV%2BQ7FOjoUUnGo9RujDg%3D&from=2064092626) no-repeat center center;background-size:cover;transform:rotateX(-90deg) translateZ(100px);}
</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>
<script>
var deg = 0;
var cube = document.getElementsByClassName("cube");
function animate() {
deg += 0.1;
var d = deg + "deg";
for (var i = 0; i < cube.length; i++) {
cube[i].style.transform = `rotateX(${d}) rotateX(${d}) rotateZ(${d})`;
}
$("#cd").text(`我得法:${d}`);
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/pqUV 著作权归作者所有。请勿转载和采集!