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

好吧，这里是另一个IE10毛刺。问题是应用透视对父元素打破了背景 – 可见性隐藏设置。请看这个小提琴： http://jsfiddle.net/2y4eA

当您悬停在红色方形上时，它在x轴上旋转180°，即使背面可见度设置为隐藏，也会显示背面，至少直到达到180°，然后消失。删除透视属性，你会看到它的工作原理，背面是不可见的，但所有的3d效果失去了。@H_502_3@

可以通过在transform属性中应用透视来解决这个问题：http://jsfiddle.net/M2pyb但是这将导致与transform-origin-z相关的问题，当z设置为0以外的任何值时，整个事情变为“scaled”：http://jsfiddle.net/s4ndv不幸的是这不是一个解决方案。@H_502_3@

背面可见的东西是probaly一个错误？如果是这样，除了我提到的之外，有没有什么工作？@H_502_3@

解决方法

我也碰到这个毛刺，它绝对是一个小故障。

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

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

(参见http://stackoverflow.com/a/14507332/2105930的答案)@H_502_3@

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

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.@H_502_3@

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

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

解决方法

相关文章