[CSS]CSS3を使うとこんなこともできる!紙を折ったり反らしたするかっこいいエフェクト

サムネイル画像をホバーし、下に隠れたテキストを表示する際に紙を折ったり反らしたりするかっこいいエフェクトを実装するチュートリアルを紹介します。

デモのキャプチャ

3D Thumbnail Hover Effects

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

デモのキャプチャ

デモページ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

元記事ではコードの紹介や画像を含む必要なファイル一式がダウンロードできます。

top of page

©2017 coliss