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

Question

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

当您将鼠标悬停在红色方 block 上时，它会在 x 轴上旋转 180°，即使背面可见性设置为隐藏，背面也会显示，至少要达到 180°，然后它会消失.移除 perspective 属性，你会发现它如预期的那样工作，背面根本不可见，当然 3d 效果也丢失了。

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

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

Answer 1

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

解决方法是对子元素应用透视变换。我在这里更新了你的 fiddle :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 的回答)

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

At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.

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