vanilla-tilt.js本地浏览器失效 Stack Overflow片段正常排查

开发者阿泽

2026-8-30

问题根因

HTML结构不合法：你将d3、angular、jquery三个脚本写在了<!doctype html>与<html>标签之外，违反HTML解析规则，会导致浏览器渲染异常，中断后续脚本执行。
脚本执行时机不对：vanilla-tilt默认在脚本加载完成后立刻执行，自动扫描页面中所有带data-tilt属性的元素绑定效果。但你把vanilla-tilt的引用放在了<body>最开头，此时需要绑定效果的.kotak方块还没被浏览器解析，脚本扫描不到目标元素，自然不会生效。Stack Overflow的代码片段环境会自动等待DOM加载完成后再执行脚本，所以相同代码在片段里可以正常运行。
本地资源加载风险：你用相对路径vanilla-tilt.min.js引入脚本，如果文件没有放在HTML同级目录、文件名拼写错误或者文件损坏，会触发404加载失败，效果完全失效。

修复步骤

清理非法位置的脚本，不需要的d3、angular、jquery测试脚本可以直接删除，减少不必要的资源加载。
把vanilla-tilt和其他脚本的引用全部移到</body>闭合标签之前，也就是所有页面DOM元素的后方，保证脚本执行时所有需要绑定效果的元素已经渲染完成。
打开浏览器开发者工具的「网络」面板，刷新页面确认vanilla-tilt.min.js的加载状态为200，没有404报错。如果排查阶段不确定本地文件是否正常，可以先暂时用CDN地址引入脚本测试，排除文件本身的问题。
（可选优化）给倾斜元素加上transform-style: preserve-3d属性，3D透视效果会更自然。

修复后的完整参考代码：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>coba tilt.js</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .kotak{
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin: 50px auto;
            display: flex;
            transform-style: preserve-3d;
        }
        .kotak h3{
            margin: auto;
        }
    </style>  
  </head>
  <body>
    <div class="kotak" data-tilt data-tilt-max="50" data-tilt-speed="400" data-tilt-perspective="500">
        <h3>tulisanku</h3>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
    <script src="vanilla-tilt.min.js" integrity="sha512-K9tDZvc8nQXR1DMuT97sct9f40dilGp97vx7EXjswJA+/mKqJZ8vcZLifZDP+9t08osMLuiIjd4jZ0SM011Q+w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  </body>
</html>

调整完后刷新页面，鼠标移动到青色方块上即可看到正常的3D倾斜效果。

内容的提问来源于stack exchange，提问作者Megantara