这段代码存在一些问题:

  1. 在引入jQuery库之前,需要先将jQuery库文件下载并放置在正确的路径下。

  2. 在JavaScript代码中,获取元素的方式应该使用document.getElementsByClassName而不是document.getElementByClassName

  3. 在JavaScript代码中,cubecontainer是获取的元素集合,所以在设置样式时需要使用索引值来访问元素。例如:cube[0].style.transform

  4. 在设置样式时,需要将变量d放入字符串中,可以使用模板字符串来实现:cube[0].style.transform = rotateX(${d}) rotateY(${d}) rotateZ(${d});

  5. 在设置样式时,旋转变换的方向应该是rotateY而不是rotateXcontainer[0].style.transform = rotateY(${d});

  6. 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>
``
!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;

原文地址: http://www.cveoy.top/t/topic/hHLX 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录