如何使用 jquery 制作按钮后翻的动画？
我想重新创建这种效果（使用 jquery），因为我认为这是有史以来最酷的事情。 http://m.madebycanvas.com/things/backflip.html（其由马修·法拉格）
...但我不知道从哪里开始。有谁知道如何或有任何想法吗？作者使用的是 scripty2 和原型框架以及 scriptaculous，我相信。
理想情况下，我还可以使用一个插件，该插件使用硬件加速 css 转换，并在不受支持的浏览器中回退到 jquery 自己的转换。如果可以的话，请解释一下您将如何从概念上做到这一点。
我正在考虑以某种方式将按钮动画放大到它将翻转到的容器的宽度，然后将锚定在中心的高度缩小到一条线，然后执行与将出现的面板相反的操作。
I would like to recreate this effect (using jquery) because I think its the coolest thing ever. http://m.madebycanvas.com/things/backflip.html (its by Matthew Farag)
...but I have no idea where to start. Does anyone know how or have any ideas? The author uses scripty2 and the prototype framework and scriptaculous, I believe.
Ideally I could also use a plugin that uses hardware accelerated css transformations with a fallback to jquery's own in unsupported browsers. Please explain how you would do it conceptually if you can.
I'm thinking to animate the button larger somehow to the width of the container it will flip to, then shrink the height anchored in the center to a line and then do the opposite to the panel that will appear.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
它使用 Webkit 动画。我制作了一个演示页面，从您发布的页面中提取基本代码： http://jsfiddle.net/42rT4/ 2/。我希望这有帮助。
但请注意，作者特别要求您不要复制代码，因此您应该从中学习并推出自己的代码。
It is using Webkit animation. I have made a demo page extracting the essential code from the page you posted: http://jsfiddle.net/42rT4/2/. I hope that's helpful.
Please note though, the author specifically asks you not to copy the code, so you should just learn from it and roll your own.
我认为可能使用 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和网络工具包）
I think that might be using CSS3 animations, check out http://line25.com/wp-content/uploads/2010/webkit-flip/demo/index.html info is http://line25.com/articles/super-cool-css-flip-effect-with-webkit-animation
(only works in chrome and webkit)