本地打开含3D艺术轮播的index.html异常问题排查与解决

问题现象 #

用VS Code实时运行功能打开含3D轮播的index.html时，3D旋转交互完全正常；但直接从本地文件夹双击打开该文件，页面仅显示一张比例失调的静态图片，轮播效果完全失效。上传至远程服务器时还出现图片加载失败的情况，调整图片位置后问题解决。

问题根源 #

1. 错误的<base>标签配置：原HTML中<base href>指向了一张图片的本地绝对路径，而非项目根目录，导致所有相对路径的资源（图片、CSS、JS）解析错误。
2. 本地绝对路径兼容性问题：CSS、JS引用使用了F:\\...这类Windows本地绝对路径，在file://协议下（直接打开本地文件）会出现路径解析异常，而VS Code实时运行是通过本地HTTP服务器（http://协议）提供服务，能正常解析这类路径。
3. 远程服务器资源缺失：上传时未同步图片文件夹，导致服务器上找不到图片资源。

修复步骤 #

• 移除错误的<base>标签，或设置正确的项目根目录作为base路径
• 所有资源（CSS、JS、图片）改用相对路径引用，避免依赖本地绝对路径
• 确保远程服务器上上传了所有资源文件，推荐将图片统一放在项目内的images文件夹，便于管理和路径引用

修正后的完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>3D Carousel</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>  
  <div id="carousel">  
    <figure id="spinner">
      <img src="images/Seed of the Haze.jpg" alt="Seed of the Haze">
      <img src="images/Daughter of the Haze.jpg" alt="Daughter of the Haze">
      <img src="images/Enchantress of the Haze.jpg" alt="Enchantress of the Haze">
      <img src="images/Primeval Ruins.jpg" alt="Primeval Ruins">
      <img src="images/Ruins.jpg" alt="Ruins">
      <img src="images/Fish Creature.jpg" alt="Digital fish creature">
      <img src="images/Fish Creature.png" alt="Digital fish creature 2">
      <img src="images/Leviathan Hunter.jpg" alt="Leviathan Hunter">
    </figure>
  </div>
  <script src="main.js"></script>
  <span style="float:left" class="ss-icon" onclick="galleryspin('-')">&lt;</span>
  <span style="float:right" class="ss-icon" onclick="galleryspin('')">&gt;</span>
</body>
</html>

注：假设图片放在项目根目录下的images文件夹中，若调整图片位置，对应修改src路径即可。

CSS代码 #

div#carousel { 
  perspective: 1200px; 
  background: #100000; 
  padding-top: 10%;
  padding-bottom: 30%; 
  font-size:0; 
  margin-bottom: 3rem; 
  overflow: hidden; 
}
figure#spinner { 
  transform-style: preserve-3d; 
  height: 300px; 
  transform-origin: 50% 50% -500px; 
  transition: 1s; 
} 
figure#spinner img { 
  width: 40%; max-width: 425px; 
  position: absolute; left: 30%;
  transform-origin: 50% 50% -500px;
  outline:1px solid transparent; 
}
figure#spinner img:nth-child(1) { transform:rotateY(0deg); }
figure#spinner img:nth-child(2) { transform: rotateY(-45deg); }
figure#spinner img:nth-child(3) { transform: rotateY(-90deg); }
figure#spinner img:nth-child(4) { transform: rotateY(-135deg); }
figure#spinner img:nth-child(5){ transform: rotateY(-180deg); }
figure#spinner img:nth-child(6){ transform: rotateY(-225deg); }
figure#spinner img:nth-child(7){ transform: rotateY(-270deg); }
figure#spinner img:nth-child(8){ transform: rotateY(-315deg); }
div#carousel ~ span { 
  color: #fff; 
  margin: 5%; 
  display: inline-block; 
  text-decoration: none; 
  font-size: 12rem; 
  transition: 0.6s color; 
  position: relative; 
  margin-top: -18rem;
  border-bottom: none; 
  line-height: 0; 
}
div#carousel ~ span:hover { color: #888; cursor: pointer; }

JS代码 #

var angle = 0;
function galleryspin(sign) { 
  spinner = document.querySelector("#spinner");
  if (!sign) { angle = angle + 45; } else { angle = angle - 45; }
  spinner.setAttribute("style","-webkit-transform: rotateY("+ angle +"deg); -moz-transform: rotateY("+ angle +"deg); transform: rotateY("+ angle +"deg);");
}

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