为什么当透视应用于父元素时，背景可见性隐藏在IE10中不工作？ [英] Why is backface-visibility hidden not working in IE10 when perspective is applied to parent elements?

问题描述

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

Ok, so here's another IE10 glitch. The problem is that applying perspective on parent elements breaks the backface-visibility hidden setting. Please see this fiddle: http://jsfiddle.net/2y4eA

当你悬停在红色方块上，它在x轴上旋转180°，即使背面可见度设置为隐藏，也会显示背面，至少直到达到180°，然后消失。删除透视属性，你会看到它工作正常，背面不可见，但是3d效果丢失。

When you hover over the red square it rotates by 180° on the x-axis, and even though the backface-visibility is set to hidden, the backface is shown, at least until the 180° is reached, then it disappears. Remove the perspective property, and you'll see that it works as expected, the backface isn't visible at all, but ofcourse the 3d effect is lost.

这是可能的以解决此问题，方法是在transform属性中应用透视图： http://jsfiddle.net/M2pyb 但是这会导致与transform -origin-z，当z设置为除0以外的任何值时，整个事情变为缩放： http://jsfiddle.net/s4ndv所以不幸的是，这不是一个解决方案。

It's possible to workaround this problem by applying perspective in the transform property: http://jsfiddle.net/M2pyb But this will cause problems in cojunction with transform-origin-z, when z is set to anything other than 0, the whole thing becomes "scaled": http://jsfiddle.net/s4ndv so unfortunately that's not a solution.

背面可见性是probaly一个错误？

The backface-visibilty thingy is probaly a bug? If so, is there any workaound other than the one i've mentioned?

推荐答案

我也碰到这个毛刺确实是一个小故障。

I came up against this glitch too and it is definitely a glitch.

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

The workaround is to apply the perspective transform on the child element. I updated your fiddle here: http://jsfiddle.net/jMe2c/

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

（另请参见回答 http://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 ：

I think it is because in IE 10, parent element 3d-properties do not propagate to the child element. This is a known unsupported feature. Check out http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property:

时，Internet Explorer 10不支持 preserve-3d 关键字。您可以通过手动将父元素的变换应用到子元素的正常变换之外的每个子元素来解决此问题。

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属性。

So the Microsoft-recommended solution is to propagate your 3d properties yourself, manually.

这篇关于为什么当透视应用于父元素时，背景可见性隐藏在IE10中不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！