此 3d 横幅在 Internet Explorer 上无法正常工作答案

【问题标题】：This 3d banner does not working correctly on Internet Explorer此 3d 横幅在 Internet Explorer 上无法正常工作
【发布时间】：2019-07-10 17:10:20
【问题描述】：

此滚动 3D 立方体示例无法在 Internet Explorer 上正常运行。

必须像其他浏览器一样 360 度旋转。

缺少哪些供应商前缀？

用于提交更多详细信息的帖子的随机文本用于提交包含更多详细信息的帖子的随机文本用于提交包含更多详细信息的帖子的随机文本用于提交包含更多详细信息的帖子的随机文本用于提交包含更多详细信息的帖子的随机文本用于提交包含更多详细信息的帖子的随机文本用于提交包含更多详细信息的帖子的随机文本

/* animation speed */
.container { 
    -webkit-animation: rotate 18s infinite linear; 
    animation: rotate 18s infinite linear; 
}
/* native */
.cube { transform:scaleX(.7) scaleY(.7); }
* { margin:0; padding:0; outline:none; box-sizing: border-box; }
.stage { width:240px; height:360px; overflow:hidden; }
.cube { 
    width:240px; 
    height:400px;
    margin-top:-20px;
    -ms-perspective:1000px; 
    -webkit-perspective: 1000px; 
    perspective: 1000px;
    -ms-perspective-origin: center center;
    -webkit-perspective-origin: center center;
    perspective-origin: center center; 
 }
.container { 
    display:block; 
    width: 240px; 
    height: 400px; 
    -ms-transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
}
.side { 
    display:block; 
    position: absolute; 
    width: 240px; 
    height: 400px; 
    background-position:center center; 
    background-repeat:no-repeat; 
    background-size:cover;
}
.face1 { 
    -webkit-transform: translateZ(120px); 
    transform: translateZ(120px);
    background-color: green;
} 
.face2 { 
    -webkit-transform: translateX(120px) rotateY(90deg); 
    transform: translateX(120px) rotateY(90deg); 
    background-color: red;
}
.face3 { 
    -webkit-transform: translateZ(-120px) scale(-1, 1); 
    transform: translateZ(-120px) scale(-1, 1);
    background-color: teal;
} 
.face4 {
    -webkit-transform: translateX(-120px) rotateY(90deg) scale(-1, 1); 
    transform: translateX(-120px) rotateY(90deg) scale(-1, 1); 
    background-color: black;
}

@-webkit-keyframes rotate { 100% { -webkit-transform: rotateY(-360deg); transform: rotateY(-360deg); } }
@keyframes rotate { 100% { -webkit-transform: rotateY(-360deg); transform: rotateY(-360deg); } }
</style>
</head>
<body cz-shortcut-listen="true">
<div class="stage">
<div class="cube">
<a class="container" href="">
<span class="face1 side"></span>
<span class="face2 side"></span>
<span class="face3 side"></span>
<span class="face4 side"></span>
</a>
</div>
</div>
</body></html>

【问题讨论】：

Stackoverflow 不是一个测验网站，请说明您尝试解决问题的步骤，您是否检查了所有 CSS 规则是否与 IE 兼容？你想让这个工作在哪个版本的 IE 中？提供实际的详细信息，而不是随机填充文本。这就是发布内容的门槛。
在 IE-11 中，添加了供应商前缀。我不知道必须添加哪些细节。 Block 适用于所有浏览器，不适用于 IE。

标签： html css internet-explorer

【解决方案1】：

看看这里：https://caniuse.com/#search=perspective

正如perspective 所说，ie 部分支持它：

IE中的部分支持是指不支持transform-style:preserve-3d属性。这可以防止嵌套 3D 转换元素。

您将不得不使用另一种方法来获取 ie。

希望有帮助

【讨论】：

【解决方案2】：

正如其他社区成员已经建议的那样，IE 不支持 transform-style preserve-3d。

除了子元素的正常变换之外，您可以通过手动将父元素的变换应用于每个子元素来解决此问题。

参考：

Internet Explorer Preserve 3D fix

【讨论】：