[CSS]カードをぺろっと裏返すエフェクトを実装するスタイルシート

CSS3のアニメーションや回転機能を使用して、カードをぺろっと裏返すエフェクトを実装するスタイルシートを紹介します。

デモのキャプチャ

Super Cool CSS Flip Effect with Webkit Animation
デモページ

デモはCSS3に対応したWebkit系ブラウザのChrome, Safariで期待通りの動作をします。
キャプチャはChromeです。

デモのキャプチャ

マウスオーバーで裏返せます

チュートリアルでは通常通りテキストレベルでHTML/CSSのコードが公開されており、更にポイントとなる箇所にメモがついた画像版もあります。

サイトのキャプチャ

ポイントが書いてあるメモ

sponsors

top of page

©2018 coliss