I introduced the card made with CSS of the material design last time.
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
- Flip card implementing Lazy Loading
- Vertical rotation flip card
- Vertical, left, right, diagonal lysis flip cards
- Frippy Cards
- 3D rotating flip card with characters floating
- Versatile vertical rotation, left and right rotation flip card
- Flip cards that rotate with a click
- Parallax flip card with letters floating
- Eight Parallax flip cards
- Flip card to flip and enlarge by click
- Flip card that displays SW character animation in rollover
- Web Business Card Style Flip Card
- Generic flip cards that flip left and right with a click
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.
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.