logo标签列表

CSS3 3D立方体在Internet Explorer中未正确显示。

htmlcssinternet-explorer3d
8

我刚试着使用一些代码创建了一个动画的3D立方体，并在立方体的每个面上放置了一个视频，但是由于某种原因，有些面总是覆盖在其他面的上方，即使它们根本不应该可见，尤其是在播放视频时。
这是一个演示：
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>

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);
  }
}

在IE 11中：
enter image description here 在Firefox中：
enter image description here 我的问题是：如何解决这个问题？
1
@isherwood IE不支持preserve-3d或backface-visibilty，但支持基本的3D。 - vals
1
Microsoft Edge，Internet Explorer的继任者，支持preserve-3d。 - Sampson
3个回答
3

你离成功就差一步，不同浏览器版本之间有一些错别字/差异，我已经修复了它们。

然后我测试了内容，并在以下浏览器上运行和显示相同:

  • Chrome 43
  • FF 37
  • IE 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);
  }
}
<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>

这是在 Windows 7 上使用 IE 11.0.9600.17691（更新至 11.0.17）的结果：
在IE11中运行时的屏幕截图
其中一些视频播放
请参考以下图片：
即使使用你的CodePen，我仍然遇到同样的问题。 - Forivin
@AndreaLigios 我的版本是11.0.9600.17801（更新版本11.0.19），但仍然无法正常工作。请再次查看我的截图，它完全有问题。如果你和其他人认为这个版本对他们有效，请与我分享一下截图。（确保在截图时播放视频。） - Forivin
添加了两张屏幕截图，展示了立方体在某些面上播放视频并在IE11上运行的情况。 - Code Uniquely
1
如果视频渲染对一些人有效而对其他人无效，则可能是由于每个系统中使用的硬件（或驱动程序）不同。因为如果可能，3D渲染将被推送到硬件上。 - Code Uniquely
我测试了它，在两台完全不同的机器上都失败了（都是win 8.1和IE 11）。PC1是一台笔记本电脑，配备了旧版的Ivy Bridge i7 CPU，没有独立显卡，6GB RAM和一个840 Evo SSD（256GB）... PC2是一台台式机，配备了不错的Haswell i5 CPU，GTX 970，8GB RAM和一个840 Evo SSD（128GB）。 - Forivin
显示剩余3条评论
1

    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;
      -moz-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;
      -moz-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;
  -moz-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;
  -moz-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;
  -moz-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;
  -moz-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;
  -moz-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;
  -moz-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);
    -moz-transform: perspective(600px) rotateX(0deg) rotateY(90deg) rotateZ(0deg);
  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(450deg) rotateZ(0deg);
    -moz-transform: perspective(600px) rotateX(360deg) rotateY(450deg) rotateZ(0deg);

  }
}

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

  }
}

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

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

  }
}

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

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

  }
}

@keyframes animate5 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -moz-transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);

  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(360deg) rotateZ(0deg);
    -moz-transform: perspective(600px) rotateX(360deg) rotateY(360deg) rotateZ(0deg);

  }
}

@keyframes animate6 {
  0% {
    transform: perspective(600px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
    -moz-transform: perspective(600px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);

  }
  100% {
    transform: perspective(600px) rotateX(360deg) rotateY(540deg) rotateZ(0deg);
    -moz-transform: perspective(600px) rotateX(360deg) rotateY(540deg) rotateZ(0deg);

  }
}


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

  }
}

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

  }
}

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

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

  }
}

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

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

  }
}

@-moz-keyframes animate5 {
  0% {
    -moz-transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);

  }
  100% {
    -moz-transform: perspective(600px) rotateX(360deg) rotateY(360deg) rotateZ(0deg);

  }
}

@-moz-keyframes animate6 {
  0% {
    -moz-transform: perspective(600px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);

  }
  100% {
    -moz-transform: perspective(600px) rotateX(360deg) rotateY(540deg) rotateZ(0deg);
    
  }
}
<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>

不在Chrome中显示

Cube Not rendering correctly

1
和我的问题一样。但是你的代码在我的Firefox中甚至都不能正常工作。 - Forivin
也许您正在使用旧版本的Firefox，因此在旧版Firefox中无法正常工作。 - Jainik Patel
1
兄弟，这个应该是一个立方体，并且看起来像这样：http://i.stack.imgur.com/SmnvA.jpg - Forivin
您可以在我的Mozilla Firefox浏览器中查看链接 http://s30.postimg.org/dndy13eu9/Screenshot_from_2015_05_27_18_55_02.png。 - Jainik Patel
1
6个面，8个角，12条边。 - Forivin
显示剩余4条评论
0
尝试添加：
在iframe链接中 &wmode=transparent <iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F&wmode=transparent" frameborder="0" allowfullscreen></iframe>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接