CSSで実装出来るフリップカードアニメーション集【回転・反転など、タイルデザインなど様々】

前回マテリアルデザインのCSSで作るカードをご紹介いたしました。

2018年11月21日【無料】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.