2

我正在尝试使用 CSS 变换和过渡来创建“卡片翻转”效果。我用 a<div>代表卡片，两个 child 代表卡片<div>的正面和背面。两个面都绝对位于彼此之上，而后者有一个 180 度的变换以将其向后翻转。

我创建了一个 jsFiddle 来说明我当前的方法：

http://jsfiddle.net/sCyLV/1/

该效果在 Chrome 和 Firefox（最新版本）中按预期工作。但是，在 IE10 中，卡片似乎在两个轴上都翻转，卡片的背面没有出现在卡片翻转时 - 我只看到正面卡片的背面。有谁知道为什么？

我也很想听听任何替代想法来实现这种效果。唯一的功能要求是该效果必须在同一方向上可重复 - 即，卡片将在连续循环中翻转，就好像它围绕 y 轴旋转一样。一旦我控制了翻转行为，我将在每次旋转 180 度时动态地换出背面的内容，从而在每次转身时都会在其正面显示新内容。

4

1 回答 1

2

当您使用rotateY(180deg)in时，动画按我假设您的意图工作transform。

这使您的翻转效果正常工作，但z-index仍然存在。为了解决这个问题，我刚刚交换了 s 的顺序div并单独为 s 设置动画，side而不是作为父项中的一个，因为 IE10 似乎对preserve-3d.

这是IE10的小提琴（注意：我已经破坏了其他浏览器，但您只需要复制特定于浏览器的属性）

于 2013-05-23T00:07:52.283 回答