[CSS]CSS3を使うとこんなこともできる!紙を折ったり反らしたするかっこいいエフェクト
Post on:2012年6月20日
サムネイル画像をホバーし、下に隠れたテキストを表示する際に紙を折ったり反らしたりするかっこいいエフェクトを実装するチュートリアルを紹介します。

[ad#ad-2]
デモはCSS 3D transformsを使用しているので、Firefox, Chrome, Safari, Operaでご覧ください。

ホバー時のエフェクトは4種類あります。

Demo 1: 短冊状に折ったエフェクト(山折り)

Demo 2: 短冊状のパネルを反らしたエフェクト
[ad#ad-2]

Demo 3: 短冊状のパネルを山にしたエフェクト

Demo 4: 短冊状に折ったエフェクト(谷折り)
元記事ではコードの紹介や画像を含む必要なファイル一式がダウンロードできます。
sponsors