Question

如前所述，背面可见性不会隐藏iframe背面

因此，我在翻转框的背面创建了一个带有iframe元素的翻转框，并且为了不使其在正面不向后显示，我将z-index添加到正面。而且有效。这是我的代码：

  <div class="flip3D">
        <div class="front">
          HOVER ME
    </div>
        <div class="end">
            <iframe width="80%" height="80%" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0"></iframe>    
        </div>
    </div>

但是，如果我将iframe放在两侧，则在翻转时，正面的iframe会覆盖背面的iframe。像这样：

Codepen link 2

  <div class="flip3D">
        <div class="front">
         <iframe id ="frame" width="auto" height="auto" src="https://www.youtube.com/embed/wZZ7oFKsKzY?enablejsapi=1" frameborder="0"></iframe>
    </div>
        <div class="end">
            <iframe width="80%" height="80%" src="https://www.youtube.com/embed/tgbNymZ7vqY" frameborder="0"></iframe>    
        </div>
    </div>

我可以通过使iframe的正面可见性解决此问题：将其隐藏在悬停状态，并使用javascript使其更流畅。

问题：是否可以仅通过CSS存档效果？即使我不使用z-index属性，它也应该可以工作，不是吗？

Answer 1

您是否缺少transform-style:preserve-3d;？

iframe（或视频）背面的可见性无法正常工作

1 个答案: