好的,这是另一个IE10故障。问题在于,在父元素上应用透视会破坏背面可见性隐藏设置。
当您将鼠标悬停在红色方块上时,它会在x轴上旋转180°,即使将背面可见性设置为隐藏,也会显示背面,至少直到达到180°为止,背面都会消失。删除Perspective属性,您将看到它按预期工作,背面完全不可见,但是3d效果当然会丢失。
可以通过在transform属性中应用透视图来解决此问题但是,当z设置为0以外的任何值时,这将导致与transform- origin-z结合使用的问题变得“缩放”:很遗憾,这不是解决方案。
背面可见的东西可能是一个错误?如果是这样,除了我提到的方法以外,还有其他解决方法吗?
我也遇到了这种故障,这绝对是一个故障。
解决方法是将透视变换应用于子元素。
.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属性。