将透视图应用于父元素时，为什么隐藏背面可见性在IE10中不起作用？

Question

好的，这是另一个IE10故障。问题在于，在父元素上应用透视会破坏背面可见性隐藏设置。

当您将鼠标悬停在红色方块上时，它会在x轴上旋转180°，即使将背面可见性设置为隐藏，也会显示背面，至少直到达到180°为止，背面都会消失。删除Perspective属性，您将看到它按预期工作，背面完全不可见，但是3d效果当然会丢失。

可以通过在transform属性中应用透视图来解决此问题但是，当z设置为0以外的任何值时，这将导致与transform-
origin-z结合使用的问题变得“缩放”：很遗憾，这不是解决方案。

背面可见的东西可能是一个错误？如果是这样，除了我提到的方法以外，还有其他解决方法吗？

Answer 1

我也遇到了这种故障，这绝对是一个故障。

解决方法是将透视变换应用于子元素。

.item {
    backface-visibility: hidden;
    transform: perspective(200px) rotateX(0deg);
}
.container:hover .item {
    transform: perspective(200px) rotateX(180deg);
}

我认为这是因为在IE 10中，父元素3d属性不会传播到子元素。这是已知的不受支持的功能。

目前，Internet Explorer 10不支持 preserve-3d
关键字。您可以通过将父元素的变换手动应用于每个子元素（除了子元素的常规变换之外）来解决此问题。

因此， Microsoft 推荐的解决方案是自己手动传播3d属性。