好的，这里有另一个IE10的问题。问题是在父元素应用透视时，会破坏背面可见性隐藏设置。请参见此示例：http://jsfiddle.net/2y4eA
当你悬停在红色正方形上时，它会绕x轴旋转180度，即使背面可见性被设置为隐藏，背面也会显示出来，至少直到达到180度为止，然后消失。移除透视属性，你会发现它按预期工作，背面根本不可见，但3D效果当然也丢失了。
可以通过将透视应用于transform属性来解决此问题：http://jsfiddle.net/M2pyb 但这会在与transform-origin-z一起使用时引起问题，当z值设为非0值时，整个东西就会“缩放”：http://jsfiddle.net/s4ndv 所以很遗憾这不是一个解决方案。
背面可见性可能是个bug吗？如果是，是否有其他解决方案除了我提到的这个？
.item {
backface-visibility: hidden;
transform: perspective(200px) rotateX(0deg);
}
.container:hover .item {
transform: perspective(200px) rotateX(180deg);
}
(另请参见https://dev59.com/z2XWa4cB1Zd3GeqPRedv#14507332中的答案)
我认为这是因为在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关键字。您可以通过手动将父元素的变换应用于每个子元素以及子元素的普通变换来解决此问题。
因此，微软建议的解决方案是手动传播您的3D属性。
preserve-3d...不幸的是，这个“解决方法”就是我已经发现并在我的问题中提到的。它的问题在于非零的z transform-origin会通过在z轴上缩放或移动项目来破坏它。这似乎是正确的行为，至少其他浏览器的行为相同，但这正是我试图解决的问题 :) - ndm.container {perspective: 200px}和.item {backface-visibility: hidden; transform: rotateX(179deg);，就会忽略背面可见性。换句话说，在父元素中设置透视时，只有使用rotateX（180度）才能使背面可见性起作用。 - chowey-depth/2像素进行移位来轻松补偿。所以我猜透视函数是“解决方法”（尽管在某些情况下存在问题），因此我将把它标记为正确答案，并且稍后还会添加一个工作立方体的示例。 - ndm我苦苦挣扎了数小时，这是唯一一个在各种浏览器中都有效的解决方案：http://www.cssplay.co.uk/menu/css3-3d-card.html
我有一个不合逻辑的好解决方案，我尝试了以上所有的解决方案都没有起作用。然而，一个错误却起了作用。当翻转卡片时，我将backface-visibility设置为可见。在IE和Chrome中都有效。
在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>.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;
}
我在这个jsfiddle中实现了@torbonaut和@chowey提出的解决方案。
HTML
<div id='container'>
<div class='backhide bottom'>bottom</div>
<div class='backhide top'>top</div>
</div>
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);
}
overflow:hidden，zoom:1，z-index:1，添加子元素等等 - 基本上任何可能改变渲染函数的东西...还有将backface-visibility应用于父元素呢？这似乎会让IE将其视为完全独立的3D实体。 - Pebbl