Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

flip
animation
css
html
styling

How to create a flip animation in CSS

Educative Answers Team

The flip animation is one of several styling options that CSS provides.

The example below contains the HTML and CSS codes used​ to add the flip animation to images:

Explanation

  • In the HTML code, the outermost container (flip-container) is only used to set the animation area’s perspective; this specifies the space that the entire animation will use during the 3D flip effect.
  • The flipper div is the container that actually flips between the front and back divs.
  • In the CSS file, on line 6, the flipper container is set to “rotate” when the mouse hovers over the flip-container div.
  • On line 14 in the CSS file, the property backface-visibility is set to “hidden” so that the back of the images do not appear during the flipping animation.
  • The settings for the animation, such as the flip speed and the 3D effect, are done on lines 19 – 24.

RELATED TAGS

flip
animation
css
html
styling
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring