如何在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度。 添加平滑過渡，然后完成。