为什么`backface-visibility:hidden` 在 iframe 上不起作用？答案

【问题标题】：Why is `backface-visibility:hidden` not working on iframe?为什么`backface-visibility:hidden` 在 iframe 上不起作用？
【发布时间】：2019-01-30 16:38:35
【问题描述】：

背面可见性不会隐藏 iframe 背面

我创建了一个两边都有iframe元素的翻转框，当翻转时，正面的iframe会覆盖背面的iframe，应用backface-visibility: hidden不会隐藏它背面，虽然它shoud be：

Codepen link

<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 可见性来解决此问题：悬停时隐藏。但是

问题：为什么backface-visibility 对iframe 不起作用？

【问题讨论】：

您可以添加一个 CSS 动画，在“半时间”切换 iframe 可见性……？
是的，我可以，但我不明白为什么 iframe 背面不工作，如果我使用不同的过渡时间功能，它的可见性将不会在翻转框翻转一半时出现
.front 和 .end 是不同的，所以它们有不同的背面。我相信你的单个元素必须是transform-style: preserve-3d;。
@StackSlave 是的，谢谢，transform-style: preserve-3d; 是它所缺少的，您可以发布答案，我会将其标记为正确

标签： html css iframe

【解决方案1】：

你错过了transform-style:preserve-3d;？

【讨论】：