如何在div上获得翻转效果

时间:2013-07-01 21:40:49

标签: javascript jquery jquery-ui html jquery-effects

我希望得到一个翻转div的jQuery UI效果。

一个例子是点击"忘记密码"在这个网站上: https://drive.jolicloud.com/welcome

你会注意到整个注册div翻转到它的后面。

我将如何实现这种效果?

4 个答案:

答案 0 :(得分:1)

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

如果您只是想来回翻转,我强烈推荐使用此选项而不是使用jQuery插件。

答案 1 :(得分:0)

不确定这是否有资格作为答案或评论,但请查看http://lab.smashup.it/flip/。我认为创建跨浏览器翻转效果所需的代码量有点太多,无需亲自尝试并且近距离接触

答案 2 :(得分:0)

对于非常简单粗糙的翻转效果,您可以将宽度设置为零,交换内容,然后将宽度设置为原始值。

答案 3 :(得分:0)

这是一个使用CSS的简单动画

http://davidwalsh.name/css-flip

基本上你在容器中创建一个前后div。将背面在Y轴上旋转180度。当您想要翻转时,将容器旋转180度。添加平滑过渡和完成。