CSS3 3D多维数据集无法在Internet Explorer中正确显示

Question

CSS3 3D多维数据集无法在Internet Explorer中正确显示

For*_*vin 8 html css 3d internet-explorer css3

我只是尝试使用一些代码创建一个动画3D立方体并在立方体的每一侧放置一个视频,但由于某种原因,立方体的某些边总是在其他边上,即使它们不应该在所有,特别是在播放视频时.
这是一个演示btw:
http://codepen.io/anon/pen/NqxRKQ
HTML:

<div id="box">
  <div class="box">
    <div class="side side1">
      <iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="side side2">
      <iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="side side3">
      <iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="side side4">
      <iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="side side5">
      <iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="side side6">
      <iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

CSS:

body {
  background-color: #666;
  color: #FFF;
}

h2 {
  color: #FFF;
}

a {
  color: #F7E309;
}

#box {
  width: 300px;
  margin: 50px;
  -webkit-perspective: 600px;
  perspective: 600px;
}

.box {
  width: 300px;
  height: 300px;
  margin: 100px auto;
  position: relative;
  color: #111;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.box div {
  position: absolute;
  text-align: center;
  left: 0;
  top: 0;
  width: 300px;
  height: 300px;
  line-height: 300px;
  font-size: 3em;
  font-weight: bold;
  transform-origin: 50% 50% -150px;
  -webkit-transform-origin: 50% 50% -50px;
  /*    -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
      backface-visibility: hidden;*/
}

.box .side1 {
  background: hsla( 0, 100%, 50%, 0.8);
  -webkit-animation: animate1 12s infinite linear;
  animation: animate1 12s infinite linear;
}

.box .side2 {
  background: hsla( 60, 100%, 50%, 0.8);
  -webkit-animation: animate2 12s infinite linear;
  animation: animate2 12s infinite linear;
}

.box .side3 {
  background: hsla( 120, 100%, 50%, 0.8);
  -webkit-animation: animate3 12s infinite linear;
  animation: animate3 12s infinite linear;
}

.box .side4 {
  background: hsla( 180, 100%, 50%, 0.8);
  -webkit-animation: animate4 12s infinite linear;
  animation: animate4 12s infinite linear;
}

.box .side5 {
  background: hsla( 240, 100%, 50%, 0.8);
  -webkit-animation: animate5 12s infinite linear;
  animation: animate5 12s infinite linear;
}

.box .side6 {
  background: hsla( 300, 100%, 50%, 0.8);
  animation: animate6 12s infinite linear;
  -webkit-animation: animate6 12s infinite linear;
}
/* for Chrome and Chrome */

@-webkit-keyframes animate1 {
  0% {
    -webkit-transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: perspective(600px) rotateX(360deg) rotateY(450deg) rotateZ(0deg);
  }
}

@-webkit-keyframes animate2 {
  0% {
    -webkit-transform: perspective(600px) rotateX(0deg) rotateY(270deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: perspective(600px) rotateX(360deg) rotateY(630deg) rotateZ(0deg);
  }
}

@-webkit-keyframes animate3 {
  0% {
    -webkit-transform: perspective(600px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: perspective(600px) rotateX(450deg) rotateY(0deg) rotateZ(-360deg);
  }
}

@-webkit-keyframes animate4 {
  0% {
    -webkit-transform: perspective(600px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: perspective(600px) rotateX(270deg) rotateY(0deg) rotateZ(360deg);
  }
}

@-webkit-keyframes animate5 {
  0% {
    -webkit-transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: perspective(600px) rotateX(360deg) rotateY(360deg) rotateZ(0deg);
  }
}

@-webkit-keyframes animate6 {
  0% {
    -webkit-transform: perspective(600px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: perspective(600px) rotateX(360deg) rotateY(540deg) rotateZ(0deg);
  }
}
/* for Firefox and IE10 */

@keyframes animate1 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(450deg) rotateZ(0deg);
  }
}

@keyframes animate2 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(270deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(630deg) rotateZ(0deg);
  }
}

@keyframes animate3 {
  0% {
    transform: perspective(600px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(450deg) rotateY(0deg) rotateZ(-360deg);
  }
}

@keyframes animate4 {
  0% {
    transform: perspective(600px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(270deg) rotateY(0deg) rotateZ(360deg);
  }
}

@keyframes animate5 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(360deg) rotateZ(0deg);
  }
}

@keyframes animate6 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(540deg) rotateZ(0deg);
  }
}

Run Code Online (Sandbox Code Playgroud)

在IE 11中:
在此输入图像描述

在Firefox中:
在此输入图像描述

我的问题:我该如何解决这个问题？

Answer 1

Cod*_*ely 3

你就快到了，不同浏览器版本之间有一些拼写错误/差异，我修复了这些。

然后我测试了内容，它运行并且看起来相同：

铬43
FF 37
浏览器11

在 Codepen 上观看演示或全屏运行以下代码片段以查看结果：

body {
  background-color: #666;
  color: #FFF;
}
h2 {
  color: #FFF;
}
a {
  color: #F7E309;
}
#box {
  width: 300px;
  margin: 50px;
  -webkit-perspective: 600px;
  -ms-perspective: 600px;
  perspective: 600px;
}
.box {
  width: 300px;
  height: 300px;
  margin: 100px auto;
  position: relative;
  color: #111;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.box div {
  position: absolute;
  text-align: center;
  left: 0;
  top: 0;
  width: 300px;
  height: 300px;
  line-height: 300px;
  font-size: 3em;
  font-weight: bold;
  transform-origin: 50% 50% -150px;
  -webkit-transform-origin: 50% 50% -150px;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;

}

.box .side1 {
  background: hsla( 0, 100%, 50%, 0.8);
  -webkit-animation: animate1 12s infinite linear;
  animation: animate1 12s infinite linear;
}
.box .side2 {
  background: hsla( 60, 100%, 50%, 0.8);
  -webkit-animation: animate2 12s infinite linear;
  animation: animate2 12s infinite linear;
}
.box .side3 {
  background: hsla( 120, 100%, 50%, 0.8);
  -webkit-animation: animate3 12s infinite linear;
  animation: animate3 12s infinite linear;
}
.box .side4 {
  background: hsla( 180, 100%, 50%, 0.8);
  -webkit-animation: animate4 12s infinite linear;
  animation: animate4 12s infinite linear;
}
.box .side5 {
  background: hsla( 240, 100%, 50%, 0.8);
  -webkit-animation: animate5 12s infinite linear;
  animation: animate5 12s infinite linear;
}
.box .side6 {
  background: hsla( 300, 100%, 50%, 0.8);
  animation: animate6 12s infinite linear;
  -webkit-animation: animate6 12s infinite linear;
}

/* for Chrome and Chrome */
@-webkit-keyframes animate1 {
  0% {
    -webkit-transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: perspective(600px) rotateX(360deg) rotateY(450deg) rotateZ(0deg);
  }
}
@-webkit-keyframes animate2 {
  0% {
    -webkit-transform: perspective(600px) rotateX(0deg) rotateY(270deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: perspective(600px) rotateX(360deg) rotateY(630deg) rotateZ(0deg);
  }
}
@-webkit-keyframes animate3 {
  0% {
    -webkit-transform: perspective(600px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: perspective(600px) rotateX(450deg) rotateY(0deg) rotateZ(-360deg);
  }
}
@-webkit-keyframes animate4 {
  0% {
    -webkit-transform: perspective(600px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: perspective(600px) rotateX(270deg) rotateY(0deg) rotateZ(360deg);
  }
}
@-webkit-keyframes animate5 {
  0% {
    -webkit-transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: perspective(600px) rotateX(360deg) rotateY(360deg) rotateZ(0deg);
  }
}
@-webkit-keyframes animate6 {
  0% {
    -webkit-transform: perspective(600px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
  }
  100% {
    -webkit-transform: perspective(600px) rotateX(360deg) rotateY(540deg) rotateZ(0deg);
  }
}

/* for Firefox and IE10 */
@keyframes animate1 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(450deg) rotateZ(0deg);
  }
}
@keyframes animate2 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(270deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(630deg) rotateZ(0deg);
  }
}
@keyframes animate3 {
  0% {
    transform: perspective(600px) rotateX(90deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(450deg) rotateY(0deg) rotateZ(-360deg);
  }
}
@keyframes animate4 {
  0% {
    transform: perspective(600px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(270deg) rotateY(0deg) rotateZ(360deg);
  }
}
@keyframes animate5 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(360deg) rotateZ(0deg);
  }
}
@keyframes animate6 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(540deg) rotateZ(0deg);
  }
}

Run Code Online (Sandbox Code Playgroud)

<h2>IE10 preserve-3d Workaround</h2>

<div id="box">
  <div class="box">
    <div class="side side1">
      <iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="side side2">
      <iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="side side3">
      <iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="side side4">
      <iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="side side5">
      <iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class="side side6">
      <iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

这是Windows 7 上IE 11.0.9600.17691（更新11.0.17 ）上的结果：

显示它在 IE11 中运行的屏幕截图

在此输入图像描述

随着一些视频的播放

IE11 的第一个屏幕截图 IE11 的第二个屏幕截图

归档时间：	10 年，4 月前
查看次数：	953 次
最近记录：	10 年，3 月前