How to Create a Card Flip Animation with HTML and CSS

Опубликовано: 28 Май 2021
на канале: Zeats

812

In this video we are going to be looking at how to create a flip card animation using with HTML and CSS only, no JavaScript is required, this card flip animation is currently a very popular technique in web design.

Links:

site files: http://tiny.cc/cardflip
getting started series: • Getting started

Chapters:

0:00 Video start
0:26 Housekeeping
1:05 Card Overview
1:47 Starter files
2:35 Stage 1: Adding the card and front card HTML
3:06 Adding the card and front card CSS
4:02 What to attach the animation code to
4:45 Adding the animation code pt1
5:35 Adding the animation code pt2
6:22 Stage 2 Hiding the card backside
7:13 Adding the back card HTML
8:20 Adding the back card CSS
9:05 Adding the back card CSS animation
9:41 Stage 3: Understanding the perspective code
10:15 Adding perspective values
12:32 Video Wrap up