4

この効果を(jqueryを使用して)再現したいと思います。これまでで最もクールなことだと思います。http://m.madebycanvas.com/things/backflip.html(Matthew Faragによる)

フリップアニメーション

...しかし、どこから始めればよいのかわかりません。誰かが方法を知っているか、何かアイデアがありますか?著者はscripty2とプロトタイプフレームワークを使用しており、scriptaculousだと思います。

理想的には、サポートされていないブラウザーでjquery自体へのフォールバックを伴うハードウェアアクセラレーションされたcss変換を使用するプラグインを使用することもできます。可能であれば、概念的にどのように行うかを説明してください。

ボタンをフリップするコンテナの幅に合わせてアニメーション化し、中央に固定されている高さを線に縮小して、表示されるパネルとは逆の操作を行うことを考えています。

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-です。 cool-css-flip-effect-with-webkit-animation

(ChromeとWebkitでのみ機能します)

于 2011-06-05T08:29:24.983 に答える