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

时间：2015-05-08 18:01:54

标签： html css css3 internet-explorer 3d

我只是尝试使用一些创建动画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>

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

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

3 个答案:

答案 0 :(得分：3)

你几乎就在那里，不同浏览器版本之间的拼写/差异很少，我修复了这些。

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

  • Chrome 43
  • FF 37
  • IE 11

Watch the demo on Codepen或在全屏幕中运行以下代码段以查看结果：

＆＃13;
＆＃13; 
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);
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

  

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

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

enter image description here

播放一些视频

First Screen shot from IE11 Second Screen shot from IE11

答案 1 :(得分：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

答案 2 :(得分：0)

尝试添加：

currentView.setAdapter(currentAdapter);

iframe链接中的

&wmode=transparent

相关问题
最新问题