如何使用jQuery将按钮执行后空翻动画？

Question

我希望使用jQuery重新创建这个效果，因为我认为它是最酷的东西。http://m.madebycanvas.com/things/backflip.html（由Matthew Farag制作）

但我不知道从哪里开始。有人知道如何做或有任何想法吗？我相信作者使用了scripty2和prototype框架以及scriptaculous。

理想情况下，我还可以使用一个插件，它使用硬件加速的css变换，并在不支持的浏览器中回退到jquery自己的变换。如果可以的话，请解释一下你会如何概念化地做到这一点。

我想将按钮放大到容器的宽度，然后缩小高度固定在中心线上，然后对将出现的面板进行相反的操作。

- Diogenes

Answer 1

它正在使用Webkit动画。我从您发布的页面中提取了必要的代码，制作了一个演示页面：http://jsfiddle.net/42rT4/2/。希望这有所帮助。

请注意，作者特别要求您不要复制该代码，因此您应该学习并自己编写代码。

- William Niu

---

是的，我知道他不希望别人复制它，所以我正在尝试使用Jquery内置动画来开发自己的动画效果。理想情况下，我还可以使用一个插件，在不支持的浏览器中回退到Jquery自己的动画效果，并使用硬件加速的CSS变换。 - Diogenes

有人能快速地通过 jQuery 的方式，对如何做到这一点进行概念性的演示吗？ - Diogenes

此外，该效果仅在页面上起作用一次，如何使其在翻转回来后重置。 - Diogenes

我将其标记为答案，考虑到这个问题已经很久没有回应了。目标是在jquery中复制它，而不是将原始内容包装在jquery插件中。 - Diogenes

Answer 2

我认为可能是使用CSS3动画，看看http://line25.com/wp-content/uploads/2010/webkit-flip/demo/index.html相关信息在http://line25.com/articles/super-cool-css-flip-effect-with-webkit-animation

（仅适用于Chrome和Webkit）

- Petah

---

考虑到 Chrome 的市场份额约为 10％，Safari 约为 6％，Webkit 的市场份额大约为 16％，因此这些影响目前对于网站来说并不是非常有用。 - Orbling

@Orbling，那不重要，重要的是你的目标受众。此外，渐进增强是关键，正如您会注意到的，这些页面仍然在其他浏览器中工作，只是没有花哨的动画效果。 - Petah

在Web上，你的目标受众很少会有一个特定的浏览器。除非你有一个企业内部网络或类似的东西，在那里浏览器是已知的 - 然后通常的做法是确保跨浏览器功能。只要有备用方案，那就没问题了 - 但为了目标受众的16％而付出这么多努力似乎有点过头了。 - Orbling

我之前遇到过这种翻转效果，但不知道如何应用它来创建面板翻转并从按钮中出现的相同效果。 - Diogenes