我正在尝试使用 CSS 变换和过渡创建“卡片翻转”效果。我正在使用 <div>代表卡，还有两个 child <div> s 代表卡片的正面和背面。两个面绝对位于彼此之上，后者有 180 度变换以将其向后翻转。
我创建了一个 jsFiddle 来说明我当前的方法:
该效果在 Chrome 和 Firefox(最新版本)中按预期工作。然而，在 IE10 中，卡片似乎在两个轴上翻转，并且翻转卡片时卡片的背面不会出现 - 我只看到正面卡片的背面。有谁知道为什么吗？
我也很想听听任何实现这种效果的替代想法。唯一的功能要求是该效果必须在同一方向上可重复 - 即卡片将连续循环翻转，就好像它绕 y 轴旋转一样。一旦我控制了翻转行为，我将在每次 180 度旋转时动态交换背面的内容，从而导致每次转动时都会在其正面显示新内容。
最佳答案
当您在 transform 中使用 rotateY(180deg) 时，动画将按我的预期工作。
这会让你的翻转效果正常工作，但 z-index 仍然无效。为了解决这个问题，我只是交换了 div 的顺序，并单独对 side 进行了动画处理，而不是在父级中将其作为一个动画，因为 IE10 似乎存在问题preserve-3d。
这是你的 IE10 的 fiddle (注意:我已经破坏了其他浏览器，但您只需要复制特定于浏览器的属性)
关于internet-explorer - 为什么这个rotate3d() CSS转换在Internet Explorer 10中不能按预期工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16703069/