4

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)

Flip animation

...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.

4

2 回答 2

2

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

但请注意,作者特别要求您不要复制代码,因此您应该从中学习并自己动手。

于 2011-06-05T12:21:17.873 回答
1

我认为这可能是使用 CSS3 动画,请查看http://line25.com/wp-content/uploads/2010/webkit-flip/demo/index.html信息是http://line25.com/articles/super-酷 CSS 翻转效果与 webkit 动画

(仅适用于 chrome 和 webkit)

于 2011-06-05T08:29:24.983 回答