Javascript 3D 轮播在 Internet Explorer 中无法正常工作

Javascript 3D carousel not working properly in Internet Explorer

本文关键字：常工作 工作 3D Explorer Internet Javascript      更新时间：2023-09-26

我正在为一个想要3D轮播的客户开发一个网站。我发现这在Chrome和FF中完美运行：http://codepen.io/dudleystorey/pen/kiajB

.HTML：

<div id=carousel>
<figure id=spinner>
<img src=//demosthenes.info/assets/images/wanaka-tree.jpg alt="">
<img src=//demosthenes.info/assets/images/still-lake.jpg alt="">
<img src=//demosthenes.info/assets/images/pink-milford-sound.jpg alt="">
<img src=//demosthenes.info/assets/images/paradise.jpg alt="">
<img src=//demosthenes.info/assets/images/morekai.jpg alt="">
<img src=//demosthenes.info/assets/images/milky-blue-lagoon.jpg alt="">
<img src=//demosthenes.info/assets/images/lake-tekapo.jpg alt="">
<img src=//demosthenes.info/assets/images/milford-sound.jpg alt="">
</figure>
</div>
<span style=float:left class=ss-icon onclick="galleryspin('-')">&lt;</span>
<span style=float:right class=ss-icon onclick="galleryspin('')">&gt;</span>

.CSS：

div#carousel { 
  perspective: 1200px; 
  background: #100000; 
  padding-top: 10%; 
  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: 2rem; 
  transition: 0.6s color; 
  position: relative; 
  margin-top: -6rem; 
  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);");
}

不幸的是，这是IE11中的一场灾难。我已经在网上搜索了帮助，但似乎一切都由最新版本的IE管理，所以我有点困惑。我对javascript和css没有太多经验，对我来说一切似乎都很好。有人可以帮忙吗？

您的功能在 IE 中失败的最可能原因与应用于figure#spinner1的transform-style: preserve-3d;规则有关。

IE

对CSS3 3D功能的支持有所改进，但根据caniuse，IE10和11仍然不支持3D转换API的特定功能。当我从您的 CSS 中删除规则时，我可以看到当缺少该功能时，整个 3d 布局都会失败。

可能还有另一种嵌套和格式化 3d 对象的方法，无需"preserve-3d"即可实现相同的视觉效果，但它可能比您现在的实现要复杂得多。

您可以考虑的另一个选项是在必要时使用 threejs 和 WebGL 来处理您的 3D 轮播 CSS 3D 属性在目标浏览器中不可用。

相关文章：