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

Question

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

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

通过在transform属性中应用透视可以解决这个问题:http://jsfiddle.net/M2pyb但这会导致与transform-origin-z结合的问题,当z被设置为0以外的任何东西时,整个事情变得"缩放":http://jsfiddle.net/s4ndv所以不幸的是,这不是一个解决方案.

背面可见的东西可能是一个错误？如果是这样,除了我提到的那个之外,还有其他工作吗？

Answer 1

我也遇到了这个故障,这绝对是一个小问题.

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

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

(另请参阅/sf/answers/1015513271/上的答案)

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

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

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

Answer 2

我挣扎了好几个小时.这是唯一适合我的crossbrowser解决方案:http://www.cssplay.co.uk/menu/css3-3d-card.html