[CSS]CSS3を使うとこんなこともできる!紙を折ったり反らしたするかっこいいエフェクト
Post on:2012年6月20日
サムネイル画像をホバーし、下に隠れたテキストを表示する際に紙を折ったり反らしたりするかっこいいエフェクトを実装するチュートリアルを紹介します。
![デモのキャプチャ](/wp-content/uploads-2012/2012062001.png)
[ad#ad-2]
デモはCSS 3D transformsを使用しているので、Firefox, Chrome, Safari, Operaでご覧ください。
![デモのキャプチャ](/wp-content/uploads-2012/2012062002.png)
ホバー時のエフェクトは4種類あります。
![デモのキャプチャ](/wp-content/uploads-2012/2012062002-01.png)
Demo 1: 短冊状に折ったエフェクト(山折り)
![デモのキャプチャ](/wp-content/uploads-2012/2012062002-02.png)
Demo 2: 短冊状のパネルを反らしたエフェクト
[ad#ad-2]
![デモのキャプチャ](/wp-content/uploads-2012/2012062002-03.png)
Demo 3: 短冊状のパネルを山にしたエフェクト
![デモのキャプチャ](/wp-content/uploads-2012/2012062002-04.png)
Demo 4: 短冊状に折ったエフェクト(谷折り)
元記事ではコードの紹介や画像を含む必要なファイル一式がダウンロードできます。
sponsors