← All elements
<div class="fl"><div class="in"><div class="f ft">Front<small>hover me</small></div><div class="f bk">Back<small>pure CSS</small></div></div></div>About this card
A card that turns over on hover using perspective, preserve-3d and a hidden back face.
How it works
The wrapper sets perspective, and an inner element uses transform-style: preserve-3d so its two faces live in 3D space. Both faces are positioned on top of each other, the back one rotated 180 degrees, and backface-visibility: hidden hides whichever side faces away. Hovering rotates the inner element by 180 degrees around the Y axis.
Ways to customise it
- Change the two gradients to recolour the faces.
- Use rotateX instead of rotateY for a vertical flip.
- Lengthen the transition and change the cubic-bezier for a slower turn.
Good to know
The flip also triggers on focus-within so keyboard users can reach the back. Do not put essential links only on the back face, and test Safari, which needs the same backface-visibility rule.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.