Face Flip
Two faces on one element, turned on the X axis. backface-visibility is what keeps the back face hidden; without it both labels show through each other at the halfway point.
Usage
Download2.4 MB
Meant for
Examples
On a Button
A control turning over to show its other side. The two faces are two real buttons in one grid cell with backface-visibility: hidden, so only the one facing you is drawn — and the control keeps one size, because both faces are always in the layout. The perspective goes on a wrapper, never on the turning element.
The class is wm wm-face-flip — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.