如何使用jquery爲背部按鈕設置動畫效果？

我想重新創建這個效果（使用jQuery），因爲我認爲它是有史以來最酷的事情。 http://m.madebycanvas.com/things/backflip.html（其由馬修·法拉格）如何使用jquery爲背部按鈕設置動畫效果？

Flip animation

...但我不知道從哪裏開始。有誰知道如何或有任何想法？我相信，作者使用scripty2和原型框架，並且使用scriptaculous。

理想情況下，我也可以使用一個插件，該插件使用硬件加速的css轉換，並在不受支持的瀏覽器中使用jQuery自帶的回退功能。請解釋一下，如果可以的話，你會在概念上做到這一點。

我在想動畫按鈕的大小會隨着它將會翻轉到的容器的寬度而變大，然後將錨定在中心的高度縮小到一條直線，然後執行與將出現的面板相反的方向。

2011-06-05 Diogenes

它使用的Webkit動畫（鉻和WebKit僅適用）。我做了一個演示頁面，從您發佈的頁面提取基本代碼：http://jsfiddle.net/42rT4/2/。我希望這有幫助。

請注意，雖然作者特別要求您不要複製代碼，所以您應該從中學習並自行推出。

2011-06-05 12:21:17

是的，我知道他不希望人們複製它，所以我想弄清楚如何使用Jquery的動畫製作自己的圖片。理想情況下，我也可以使用一個插件，該插件使用硬件加速的css轉換，並在不受支持的瀏覽器中使用jQuery自帶的回退功能。 – Diogenes 2011-07-03 22:49:02

任何人都可以做一個快速的概念，通過如何做到這一點，jQuery的風格？ – Diogenes 2011-07-03 22:49:52

此外，該效果只能在頁面上運行一次，一旦完成翻轉後，如何重置該效果。 – Diogenes 2011-07-04 20:35:19

2011-06-05 08:29:24 Petah

鑑於Chrome的市場份額約爲10％，Safari瀏覽器的市場份額約爲6％，Webkit的市場份額大致相當於16％，所以這些效果對於網站來說並不是非常有用。 – Orbling 2011-06-05 12:35:18

@Orling，這是無關緊要的，重要的是你的目標受衆。漸進式增強也是關鍵，正如您會注意到的那樣，這些網頁仍然可以在其他瀏覽器中使用，只是無法使用幻想動畫。 – Petah 2011-06-05 21:12:00

在網絡上，您的目標受衆很少有明確的瀏覽器。除非你有公司內聯網或者其他瀏覽器已知的地方，否則通常的做法是確保跨瀏覽器的功能。只要有一個倒退，那麼很好 - 但是對於16％的目標觀衆來說，這似乎是一個很大的努力。 – Orbling 2011-06-05 21:54:30

回答