CSS 当透视应用于父元素时，为什么隐藏背面可见性在 IE10 中不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12622441/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is backface-visibility hidden not working in IE10 when perspective is applied to parent elements?
提问by ndm
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
好的，这是另一个 IE10 故障。问题是在父元素上应用透视会破坏背面可见性隐藏设置。请看这个小提琴：http: //jsfiddle.net/2y4eA
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.
当您将鼠标悬停在红色方块上时，它会在 x 轴上旋转 180°，即使背面可见性设置为隐藏，背面也会显示，至少在达到 180° 之前，它会消失。删除透视属性，您会看到它按预期工作，背面根本不可见，但当然 3d 效果丢失了。
It's possible to workaround this problem by applying perspective in the transform property: http://jsfiddle.net/M2pybBut 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/s4ndvso unfortunately that's not a solution.
可以通过在转换属性中应用透视来解决此问题：http: //jsfiddle.net/M2pyb但这会导致与 transform-origin-z 结合出现问题，当 z 设置为 0 以外的任何值时，整个事情变成“缩放”：http: //jsfiddle.net/s4ndv不幸的是，这不是解决方案。
The backface-visibilty thingy is probaly a bug? If so, is there any workaound other than the one i've mentioned?
背面可见性的东西可能是一个错误？如果是这样，除了我提到的方法之外还有其他解决方法吗？
采纳答案by chowey
I came up against this glitch too and it is definitely a glitch.
我也遇到了这个故障，这绝对是一个故障。
The workaround is to apply the perspective transform on the child element. I updated your fiddle here: http://jsfiddle.net/jMe2c/
解决方法是在子元素上应用透视变换。我在这里更新了你的小提琴：http: //jsfiddle.net/jMe2c/
.item {
backface-visibility: hidden;
transform: perspective(200px) rotateX(0deg);
}
.container:hover .item {
transform: perspective(200px) rotateX(180deg);
}
(See also answer at https://stackoverflow.com/a/14507332/2105930)
（另请参阅https://stackoverflow.com/a/14507332/2105930 上的答案）
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:
我认为这是因为在 IE 10 中，父元素 3d 属性不会传播到子元素。这是一个已知的不受支持的功能。查看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-3dkeyword. 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.
目前，Internet Explorer 10 不支持preserve-3d关键字。除了子元素的正常变换之外，您还可以通过手动将父元素的变换应用于每个子元素来解决此问题。
So the Microsoft-recommended solution is to propagate your 3d properties yourself, manually.
因此，Microsoft推荐的解决方案是自己手动传播 3d 属性。
回答by torbonaut
I struggled for hours. this is the only crossbrowser solution that worked for me: http://www.cssplay.co.uk/menu/css3-3d-card.html
我挣扎了几个小时。这是唯一对我有用的跨浏览器解决方案：http: //www.cssplay.co.uk/menu/css3-3d-card.html
回答by Malibur
I would suggest stop battling IE with the perspective property set on all transformed elements and start testing for support for preserve-3d. I followed this guy to expand Modernizr with a property test: https://coderwall.com/p/qctclg?comment=This+was+awesome%21+And+exactly+what+i+needed.+Thanks%21+
我建议停止在所有转换元素上设置透视属性的 IE 并开始测试对preserve-3d 的支持。我跟着这个人用属性测试扩展了 Modernizr：https: //coderwall.com/p/qctclg?comment=This+was+awesome%21+And+exactly+what+i+needed.+ Thanks%21+
that way, its possible to do a fallback for IE's lacking implementation of 3d transforms, and start playing with the more cutting edge possibilities in the other browsers.
这样，它可以为 IE 缺乏 3d 转换实现做一个后备，并开始在其他浏览器中使用更前沿的可能性。
otherwise IE will make your code too messy, and still not give you the same possibilities - like rotating multisided 3d objects.
否则 IE 会使您的代码过于混乱，并且仍然无法为您提供相同的可能性 - 例如旋转多边 3d 对象。
..just my 2 cents.
..只是我的 2 美分。
回答by Dan Ovidiu Boncut
A workaround that i would imagine is adding a transition for opacity that has 0 timing and has a delay of half of your perspective transition.
我想象的一种解决方法是为不透明度添加一个过渡，该过渡具有 0 时间并且延迟了透视过渡的一半。
.container, .item {
width: 200px;
height: 200px;
opacity:1;
}
.container {
perspective: 200px;
}
.container:hover .item {
transform: rotateX(180deg);
opacity:0;
}
.item {
background-color: #ff0000;
backface-visibility: hidden;
transition: transform 3000ms, opacity 0ms 1500ms;
}
回答by Michael
I have a nice illogical solution, I tried all the solutions above and none worked. However, an error did. I set the backface-visibility to visible when the card is flipped. works in both IE and Chrome.
我有一个很好的不合逻辑的解决方案，我尝试了上述所有解决方案，但都没有奏效。然而，一个错误。当卡片翻转时，我将背面可见性设置为可见。适用于 IE 和 Chrome。
It works better in Chrome, IE is ok.
在 Chrome 中效果更好，IE 也可以。
var flipcard = document.getElementsByClassName("flipcard");
var i;
for (i = 0; i < flipcard.length; i++) {
flipcard[i].addEventListener("click", function() {
this.classList.toggle("is-flipped");
});
}.card_scene {
width: 180px;
height: 234px;
margin: 10px 5px;
perspective: 600px;
float:left;
}
.flipcard {
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.flipcard.is-flipped {
transform: rotateY(180deg);
}
.flipcard.is-flipped .card__face {
backface-visibility: visible;
}
.card__face {
position: absolute;
max-width: 100%;
max-height: 100%;
line-height: 234px;
backface-visibility: hidden;
}
.card__face--front {
transform: rotateY(0deg);
}
.card__face--back {
background: white;
transform: rotateY(-180deg);
border: 1px solid #CCC;
width: 100%;
}
.cardtext {
margin: 6px;
font-size:14px;
line-height: 1.2em;
display: inline-block;
width: 100%;
white-space: pre;
}
.flipcard-breakfloat {
clear: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- start of flipcard tempalte -->
<div class="build-only">
<h2>question text here</h2>
<p>Flip the pictures to...</p>
<div>
<div class="card_scene">
<div class="flipcard">
<div class="card__face card__face--front"><picture class="card__image"><img width="180" height="234" id="yui_3_17_2_1_1534724749880_198" src="https://media.gettyimages.com/photos/world-heritage-listed-rainforest-in-dorrigo-national-park-new-south-picture-id936315116" /> </picture></div>
<div class="card__face card__face--back">
<p class="cardtext">** max width of feedback **<br />Add feedback text here use <br />shift+enter for line breaks. <br />don't use just use enter or <br />break will appear below <br />iamge, and overlay the text. <br />note the class <br />".nsw-td-flipcard-breakfloat" <br />this breaks the float: left so <br /> following text appears <br />as normal <br />Image size is width: <br />"180" height: "234"</p>
</div>
</div>
</div>
<div class="card_scene">
<div class="flipcard">
<div class="card__face card__face--front"><picture class="card__image"> <img width="180" height="234" alt="" src="https://media.gettyimages.com/photos/lonely-single-tree-in-the-field-picture-id680917092" /> </picture></div>
<div class="card__face card__face--back">
<p class="cardtext">** max width of feedback ** <br />Add feedback text here use <br />shift+enter for line breaks. <br />don't use just use enter or <br />break will appear below <br />iamge, and overlay the text. <br />note the class <br />".nsw-td-flipcard-breakfloat" <br />this breaks the float: left so <br /> following text appears <br />as normal <br />Image size is width: <br />"180" height: "234"</p>
</div>
</div>
</div>
<div class="card_scene">
<div class="flipcard">
<div class="card__face card__face--front"><picture class="card__image"> <img width="180" height="234" alt="" src="https://media.gettyimages.com/photos/old-tree-picture-id173501312" /> </picture></div>
<div class="card__face card__face--back">
<p class="cardtext">** max width of feedback ** <br />Add feedback text here use <br />shift+enter for line breaks. <br />don't use just use enter or <br />break will appear below <br />iamge, and overlay the text. <br />note the class <br />".nsw-td-flipcard-breakfloat" <br />this breaks the float: left so <br /> following text appears <br />as normal <br />Image size is width: <br />"180" height: "234"</p>
</div>
</div>
</div>
</div>
<div class="flipcard-breakfloat"></div>
</div>
<!-- end of flipcard tempalte -->
<p></p>
<p></p>回答by Jon
I implemented the solution proposed by @torbonaut and @chowey in this jsfiddle
我在这个jsfiddle中实现了@torbonaut和@chowey提出的解决方案
html
html
<div id='container'>
<div class='backhide bottom'>bottom</div>
<div class='backhide top'>top</div>
</div>
css
css
#container, .bottom, .top {
width: 200px;
height: 300px;
position: absolute;
-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}
.backhide{
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
#container:hover .bottom {
-moz-transform: perspective(800px) rotateY(0);
-webkit-transform: perspective(800px) rotateY(0);
transform: perspective(800px) rotateY(0);
}
#container:hover .top {
-webkit-transform: perspective(800px) rotateY(-180deg);
-moz-transform: perspective(800px) rotateY(-180deg);
transform: perspective(800px) rotateY(-180deg);
}
.bottom {
background-color: #ff0000;
-moz-transform: perspective(800px) rotateY(180deg);
-webkit-transform: perspective(800px) rotateY(180deg);
transform: perspective(800px) rotateY(180deg);
}
.top {
background-color: #e0e0e0;
-moz-transform: perspective(800px) rotateY(0deg);
-webkit-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
}
