свойство - как включить html5 в internet explorer




CSS3 3D Cube не отображается правильно в Internet Explorer (2)

попробуйте добавить:

&wmode=transparent

в ссылке iframe

<iframe style="display:block;" width="300" height="300" src="https://www.youtube.com/embed/srS7SvLV7Bg?list=PL662F41918C22319F&wmode=transparent" frameborder="0" allowfullscreen></iframe>

Я просто попытался использовать какой-то код, который создает анимированный 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:

В Firefox:

Мой вопрос: как я могу это исправить?


Вы были почти там, было несколько опечаток / различий между различными версиями браузера, и я исправил их.

Затем я тестировал контент, и он запускался и выглядел так же:

  • 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>

Это результат IE 11.0.9600.17691 (обновления 11.0.17 ) в Windows 7:

Экранные снимки, показывающие, что он работает в IE11

И с некоторыми из видео, играющих







3d