我正在尝试使用CSS转换和转换创建“卡片翻转”效果。我使用<div>代表卡片，并使用两个孩子<div>代表卡片的正面和背面。两个面都绝对位于彼此的顶部，后者有一个180度的变换可以向后转动。
我创建了一个jsFiddle来说明我目前的方法：
此效果可在Chrome＆amp; Firefox（最新版本）。但是，在IE10中，卡片似乎在两个轴上翻转，卡片的背面没有出现，因为卡片被翻转 - 我只看到前卡的背面。有谁知道为什么？
我也很想听到任何其他想法来实现这个效果。唯一的功能要求是这种效果必须在同一方向上可重复 - 即，卡片将在连续的环路中翻转，好像它围绕y轴旋转一样。一旦我控制了翻转行为，我将在每次180度旋转时动态地交换背面的内容，导致每次转动时都会在其脸部显示新内容。
答案 0 :(得分：2)
当您在rotateY(180deg)中使用transform时，动画的效果正如我所假设的那样。
这会让你的翻转效果正常工作，但z-index仍然没有。为了解决这个问题，我刚刚交换了div的顺序并单独为side设置了动画，而不是在父设备中设置动画，因为IE10似乎与preserve-3d有问题。
这是IE10的小提琴（注意：我打破了其他浏览器，但你只需要复制特定于浏览器的属性）