How to get a flip effect on a div

Question

I want to get like a jQuery UI effect that flips a div.

An example would be clicking "forgot password" on this site: https://drive.jolicloud.com/welcome

You will notice the whole signup div flips to the back of it.

How would I achieve this effect?

Answer 1

They are using Flippant , very simple and cool. Its mostly based on CSS transform effects and animations.

I highly recommend this option over the use of a jQuery plugin if you just want to flip things back and forth.

Answer 2

Not sure if this should qualify as an answer or comment, but check out http://lab.smashup.it/flip/ . I think the amount of code required to create a cross browser flipping effect is a little too much to ask without trying yourself and getting close

Answer 3

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

Answer 4

This is a simple animation using CSS

http://davidwalsh.name/css-flip

Basically you create a front and back div in a container. Rotate the back one 180 degrees over the Y axis. When you want to flip, you rotate the container 180 degrees. Add smooth transition and your done.