MoreLesson 188Free preview

Flip Card

This lesson is part of How To · All levels

Summary

This lesson discusses flip cards, which rotate to show the backside when hovering or focusing. The three-dimensional effect is created with perspective on the container, transform-style: preserve-3d, and backface-visibility: hidden on both sides. Since hover is not available on all devices, provide a click trigger or keyboard focus.

Key points

Give the wrapper perspective so that the rotation can be seen as a three-dimensional effect.
Use the transform-style: preserve-3d on the rotating interior elements
Hide the backside with backface-visibility: hidden and initial rotation 180 degrees
Provide a focus or click trigger and reduced motion options for accessibility

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.