如何在div上获得翻转效果

Question

我想要像翻转div的jQuery UI效果。

一个示例是单击以下站点上的“忘记密码”： https : //drive.jolicloud.com/welcome

您会注意到整个注册div翻转到它的背面。

我将如何达到这种效果？

Answer 1

他们正在使用Flippant ，非常简单和酷。 它主要基于CSS变换效果和动画。

如果您只想来回翻转内容，我强烈建议您使用此选项，而不要使用jQuery插件。

Answer 2

不知道这是否可以作为答案或评论，但请查看http://lab.smashup.it/flip/ 。 我认为，创建跨浏览器翻转效果所需的代码量太多了，而无需亲自尝试就可以问清楚

Answer 3

为了获得非常简单而原始的翻转效果，您可以将宽度设置为零，将内容交换，然后将宽度设置为原始值。

Answer 4

这是使用CSS的简单动画

http://davidwalsh.name/css-flip

基本上，您可以在容器中创建前和后div。 将后背绕Y轴旋转180度。 要翻转时，可以将容器旋转180度。 添加平滑过渡，然后完成。