如何使用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

回答