Create a Card Flip Animation with CSS

Andy Van Slaars
InstructorAndy Van Slaars
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

Animation can be a powerful way to enhance a user experience. In this lesson, we'll walk through the creation of a card-flip animation, creating a nice visual effect when toggling between the front and back of a div meant to represent a card, like a playing card, or a flashcard. We'll create this effect using a touch of JavaScript and CSS transforms. No framework or library required.

Juan Marco
Juan Marco
~ 4 years ago

If anybody is wondering how the transition timing function ease works, check out this post.

Will Johnson
Will Johnson
~ 4 years ago

If anybody is wondering how the transition timing function ease works, check out this post.

Hey @Juan thank you for sharing that resource to help out fellow learners!

Markdown supported.
Become a member to join the discussionEnroll Today