为什么在将透视图应用于父元素时，背景隐藏隐藏function在IE10中不起作用？
好吧，这是另一个IE10故障。 问题是在父元素上应用透视会打破背面隐藏设置。 请看这个小提琴： http : //jsfiddle.net/2y4eA
当您将鼠标hover在红色方块上时，它将在x轴上旋转180°，并且即使背面的可见性设置为隐藏，也会显示背面，至less直到达到180°，然后消失。 删除透视属性，你会看到它的预期效果，背面是根本不可见的，但是当然3D效果是丢失的。
可以通过在transform属性中应用透视来解决这个问题： http : //jsfiddle.net/M2pyb但是，当z被设置为除0以外的任何值时，这将导致与transform-origin-z合作的问题，整个事情成为“缩放”： http : //jsfiddle.net/s4ndv所以不幸的是，这不是一个解决scheme。
背面visibilty thingy可能是一个错误？ 如果是这样的话，除了我提到的那个之外，还有没有其他的方法？
我也遇到了这个小故障，这绝对是一个小故障。
解决方法是在子元素上应用透视变换。 我在这里更新你的小提琴： http : //jsfiddle.net/jMe2c/
.item { backface-visibility: hidden; transform: perspective(200px) rotateX(0deg); } .container:hover .item { transform: perspective(200px) rotateX(180deg); }
（另请参阅https://stackoverflow.com/a/14507332/2105930上的答案）;
我认为这是因为在IE 10中，父元素3d-属性不会传播到子元素。 这是一个已知的不受支持的function。 退房http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property ：
目前，Internet Explorer 10不支持preserve-3d关键字。 除了子元素的普通变换之外，还可以通过手动将父元素的变换应用于每个子元素来解决此问题。
所以微软推荐的解决scheme是手动传播你的3D属性。
我挣扎了好几个小时。 这是唯一适用于我的交叉浏览器解决scheme： http : //www.cssplay.co.uk/menu/css3-3d-card.html
一个解决方法，我会想象的是添加一个不透明的转变，有0时间，并延迟了一半的angular度转换。
.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; }
我会build议停止与所有转换的元素上设置透视属性的IE浏览器，并开始testing支持保存-3D。 我跟着这家伙扩大Modernizr与财产testing： https : //coderwall.com/p/qctclg?comment= This+was+awesome%21+And+exactly+what+i+needed.+ Thanks%21+
这样，它可能做一个后备的IE浏览器缺乏3D变换的实施，并开始玩在其他浏览器更先进的可能性。
否则IE会让你的代码太杂乱，而且还不能给你相同的可能性 – 就像旋转多边形的3D对象一样。
只是我2美分。
我在这个jsfiddle中实现了@torbonaut和@chowey提出的解决scheme
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); }
