!DOCTYPE htmlhtml head meta charset=utf-8 name=viewport content=width=device-width initial-scale=1 maximum-scale=1 user-scalable=no titleWebCattitle script src=jsjqueryminjsscript style margin0;
这段代码存在一些问题:
-
在引入jQuery库之前,需要先将jQuery库文件下载并放置在正确的路径下。
-
在JavaScript代码中,获取元素的方式应该使用
document.getElementsByClassName而不是document.getElementByClassName。 -
在JavaScript代码中,
cube和container是获取的元素集合,所以在设置样式时需要使用索引值来访问元素。例如:cube[0].style.transform。 -
在设置样式时,需要将变量
d放入字符串中,可以使用模板字符串来实现:cube[0].style.transform =rotateX(${d}) rotateY(${d}) rotateZ(${d});。 -
在设置样式时,旋转变换的方向应该是
rotateY而不是rotateX:container[0].style.transform =rotateY(${d});。 -
setInterval函数的第二个参数应该是毫秒为单位的时间间隔,可以将其改为100来调整旋转速度。
修复后的代码如下:
<!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="js/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.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")[0];
var container = document.getElementsByClassName("container")[0];
function fun() {
deg += 0.1;
var d = deg + "deg";
cube.style.transform = `rotateX(${d}) rotateY(${d}) rotateZ(${d})`;
container.style.transform = `rotateY(${d})`;
$("#cd").text("我得法:" + d);
}
setInterval(fun, 100);
</script>
</body>
</html>
``
原文地址: http://www.cveoy.top/t/topic/hHLX 著作权归作者所有。请勿转载和采集!