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 回答