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

好的，这是另一个 IE10 故障。问题在于，对父元素应用透视会破坏背面可见性隐藏设置。请看这个小提琴：http://jsfiddle.net/2y4eA http://jsfiddle.net/2y4eA

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

可以通过在转换属性中应用透视来解决此问题：http://jsfiddle.net/M2pyb http://jsfiddle.net/M2pyb但这会导致与transform-origin-z结合出现问题，当z设置为0以外的任何值时，整个事情都会变得“缩放”：http://jsfiddle.net/s4ndv http://jsfiddle.net/s4ndv不幸的是，这不是一个解决方案。

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

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

解决方法是对子元素应用透视变换。我在这里更新了你的小提琴：http://jsfiddle.net/jMe2c/ http://jsfiddle.net/jMe2c/

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

（另请参阅答案https://stackoverflow.com/a/14507332/2105930 https://stackoverflow.com/a/14507332/2105930)

我认为这是因为在 IE 10 中，父元素 3d 属性不会传播到子元素。这是已知的不受支持的功能。查看http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property:

目前，Internet Explorer 10 不支持保留 3d关键词。除了子元素的正常变换之外，您还可以通过手动将父元素的变换应用到每个子元素来解决此问题。

So the 微软- 推荐的解决方案是自己手动传播 3d 属性。