如何用 HTML 和 CSS 创建 8 个立方体并排排列？
<!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;
}
<p>body {}</p>
<p>.container {
perspective: 1000px;
margin: 100px;
margin-top: 300px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}</p>
<p>.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.001s;
margin: 10px;
}</p>
<p>.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;
}</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&x-signature=%2B36b%2BgdPV%2BQ7FOjoUUnGo9RujDg%3D&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 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 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 + "deg";
for (var i = 0; i < cube.length; i++) {
cube[i].style.transform = <code>rotateX(${d}) rotateX(${d}) rotateZ(${d})</code>;
}
$("#cd").text(<code>我得法:${d}</code>);
requestAnimationFrame(animate);
}</p>
<p>animate();
</script></p>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/pqVv 著作权归作者所有。请勿转载和采集!