I introduced the card made with CSS of the material design last time.
【無料】CSSで作る流行りのマテリアルデザインのオシャレカードコレクションThis time, I will introduce a collection of flip card animations with more animation.
It is interesting to have various movements such as rotation and inversion, it is essential that you want to actually incorporate it into web design!
Because there are many things that move only in CSS, it is easy to implement the display speed quickly.
Clickable Flip Card
See the Pen Pure CSS clickable flip cards by Kacper Parzęcki (@kacpertn4t) on CodePen.
Flip card implementing Lazy Loading
See the Pen Lazy Loading Fig+Figcaption & Flipping Card by Alex Paul (@alex_paul) on CodePen.
Vertical rotation flip card
See the Pen Flipping Card by Dmitry Korobov (@DmitryKorobov) on CodePen.
Vertical, left, right, diagonal lysis flip cards
See the Pen CSS 3D Flip Cards by Welling Guzman (@wellingguzman) on CodePen.
Frippy Cards
See the Pen flippyCards by Kayleigh (@kayfo23) on CodePen.
3D rotating flip card with characters floating
See the Pen 3D Flip Cards Pure CSS and HTML by Arash Rasteh (@ArashRasteh) on CodePen.
Versatile vertical rotation, left and right rotation flip card
See the Pen Pure CSS Flip Card by Aron (@Aoyue) on CodePen.
Flip cards that rotate with a click
See the Pen 3D Product Cards by Zac (@Zacaree) on CodePen.
Parallax flip card with letters floating
See the Pen Parallax Card by Hakkam Abdullah (@Moslim) on CodePen.
Eight Parallax flip cards
See the Pen Parallax Flipping Cards by Tyrell Rummage (@tyrellrummage) on CodePen.
Flip card to flip and enlarge by click
See the Pen Element Card – Group 11 element by Mario Duarte (@MarioDesigns) on CodePen.
Flip card that displays SW character animation in rollover
See the Pen 3D Flipping Cards by Rita Bradley (@ritalbradley) on CodePen.
Web Business Card Style Flip Card
See the Pen ampersand flash card | css knockout text + flip animation by Eina O (@thelittleblacksmith) on CodePen.
Generic flip cards that flip left and right with a click
See the Pen Flipping card by Sergey Nikishkin (@nikishkin) on CodePen.