MoreLesson 239Free preview

Flip Box

This lesson is part of How To · All levels

Summary

A flip box is a two-sided card that rotates 180 degrees when hovered or clicked. This effect is built with perspective on the container, transform-style: preserve-3d on the card, and backface-visibility: hidden so that the back side is not transparent. The front and back are stacked, then the back is rolled as a starting condition.

Key points

The perspective on the parent gives the depth 3D; a value of about 600-1200px feels reasonable.
Transform-style: preserve-3d keeps the child elements in the 3D space.
Backface-visibility: hidden hides the side that surrounds the screen.
The rear side is given rotateY(180deg) as the initial condition, then the mother card is played while hovered.

Full lesson

Code examples and quizzes

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