我正在尝试使用 CSS 变换和过渡来创建“卡片翻转”效果。我用 a<div>
代表卡片,两个 child 代表卡片<div>
的正面和背面。两个面都绝对位于彼此之上,而后者有一个 180 度的变换以将其向后翻转。
我创建了一个 jsFiddle 来说明我当前的方法:
该效果在 Chrome 和 Firefox(最新版本)中按预期工作。但是,在 IE10 中,卡片似乎在两个轴上都翻转,卡片的背面没有出现在卡片翻转时 - 我只看到正面卡片的背面。有谁知道为什么?
我也很想听听任何替代想法来实现这种效果。唯一的功能要求是该效果必须在同一方向上可重复 - 即,卡片将在连续循环中翻转,就好像它围绕 y 轴旋转一样。一旦我控制了翻转行为,我将在每次旋转 180 度时动态地换出背面的内容,从而在每次转身时都会在其正面显示新内容。