前回マテリアルデザインのCSSで作るカードをご紹介いたしました。
【無料】CSSで作る流行りのマテリアルデザインのオシャレカードコレクション 今回はさらにアニメーションを加えたフリップカードアニメーション集をご紹介します。
回転や反転などさまざまな動きをしていて面白く、実際にWEBデザインに取り入れたくなること必須！
CSSのみで動くものも多いので、表示速度も早く実装もしやすいですよ。
クリッカブルフリップカード
See the Pen Pure CSS clickable flip cards by Kacper Parzęcki (@kacpertn4t) on CodePen.
Lazy Loadingを実装しているフリップカード
See the Pen Lazy Loading Fig+Figcaption & Flipping Card by Alex Paul (@alex_paul) on CodePen.
上下回転フリップカード
See the Pen Flipping Card by Dmitry Korobov (@DmitryKorobov) on CodePen.
上下左右、斜め回転フリップカード集
See the Pen CSS 3D Flip Cards by Welling Guzman (@wellingguzman) on CodePen.
フリッピーカード
See the Pen flippyCards by Kayleigh (@kayfo23) on CodePen.
文字が浮かんで見える3D回転フリップカード
See the Pen 3D Flip Cards Pure CSS and HTML by Arash Rasteh (@ArashRasteh) on CodePen.
汎用性の高い上下回転、左右回転フリップカード
See the Pen Pure CSS Flip Card by Aron (@Aoyue) on CodePen.
クリックで回転するフリップカード
See the Pen 3D Product Cards by Zac (@Zacaree) on CodePen.
文字が浮いて見えるパララックスフリップカード
See the Pen Parallax Card by Hakkam Abdullah (@Moslim) on CodePen.
パララックスフリップカード8種
See the Pen Parallax Flipping Cards by Tyrell Rummage (@tyrellrummage) on CodePen.
クリックで反転し拡大するフリップカード
See the Pen Element Card – Group 11 element by Mario Duarte (@MarioDesigns) on CodePen.
ロールオーバーでSWキャラアニメが表示されるフリップカード
See the Pen 3D Flipping Cards by Rita Bradley (@ritalbradley) on CodePen.
WEB名刺風フリップカード
See the Pen ampersand flash card | css knockout text + flip animation by Eina O (@thelittleblacksmith) on CodePen.
クリックで左右反転する汎用的なフリップカード
See the Pen Flipping card by Sergey Nikishkin (@nikishkin) on CodePen.
