后台可见性在IE10中无法正常工作——在webkit中正常工作

Question

我正在制作一个简单的纯CSS“翻转卡片”动画，它必须在IE10中正常工作，但不幸的是我编写的代码无法实现这一点。

你可以在这里查看jsFiddle演示或这里下载示例html文件。

我发现从这个官方演示页面中可以看到后面可见性在IE10中是有效的，所以也许我只是忽略了某些愚蠢的问题，也许需要另一个人帮忙看一下！

提前感谢！

- felixthehat

---

试试这个... http://jsfiddle.net/NAy2r 或者试试@resonic的建议。两个在IE10上都对我有效。 - user1076821

Answer 1

微软IE的一些开发人员看到了我的推文，并已经提供了修复方案！

显然，IE10不支持preserve-3d，他们制作了this jsFiddle演示

非常感谢@reybango和@sgalineau的帮助 - 非常感激。

- felixthehat

---

我真的很想知道这为什么有效。将两个元素旋转360°对我来说没有意义。它们后来应该都在同一位置，不是吗？ - samy-delux

是啊，这对我也毫无意义。有人知道为什么吗？ - ericb

这似乎有效。但是没有透视效果。一旦我在透视值中添加 px，透视效果就会出现，但它会像疯了一样旋转。（IE 10.0.9200.16438 在 Windows 7 上） - xsonic

那个 jsFiddle 刚刚在 Windows 7 64位上的IE 10.0.9200.16540上崩溃了。 - styfle

Answer 2

我只将背面可见性应用于子元素，但IE10仍然显示背面。 删除保留3d会破坏3d动画的主要视觉特征之一，因此这不是一个可行的解决方法。

不幸的是，@reybango和@sgalineau上面提到的演示改变了效果外观，从3d旋转变成了简单的宽度变化，因此也不是可行的解决方法。

底线是IE10需要升级以支持CSS 3d动画规范。

- Max West

Answer 3

这似乎是CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround的重复问题。当backside-visibility应用于元素自身时（如果应用于父级，则不起作用），它可以在IE10上工作。您应该将其与相同的transform属性结合使用，如下所示：

.back{
  transform : perspective(1000px) rotateY(0deg) backside-visibility: hidden;
}
.front{
  transform : perspective(1000px) rotateY(180deg) backside-visibility: hidden;
}

- redochka

---

你应该得一枚奖章。我花了两个小时才让那个属性在JS中能够正常工作，但只有在动画中才行。缓慢鼓掌。 - user1076821

Answer 4

这是关于微软360°旋转示例可行性的评论。

首先看一下示例本身，微软的解决方法从初始代码中移除了preserve-3d transform-style属性。

结果IE10不支持preserve-3d，他们在msdn上建议使用此类解决方法：

http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property

将transform-style设置为默认值'flat'后，子元素将继承父元素的旋转。因此，卡片的正反面都被旋转到了360°（= 0°），这里的诀窍在于背面会显示在顶部，因为它在DOM中排在后面。

为了使这更加明显，我为两个示例的背面添加了opacity:0.5，现在你可以看到实际发生了什么：

http://jsfiddle.net/7FeEz/12/

http://jsfiddle.net/ax2Mc/71/

因此，微软的方法在某些情况下可行，但没有真正支持preserve-3d时并不适用于所有情况。

- bitinn

Answer 5

这是我的解决方案。 http://jsfiddle.net/UwUry/531/

我在IE 11和Chrome上尝试过。它像翻转盒子一样工作。

- Birol İnci

---

在IE 11中，它会翻转卡片，但是背面的卡片突然只在翻转后出现 - 这不是一个干净的过渡。 - MarzSocks