You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bandolier-website/admin/bando/demos/Flipper.svelte.md

14 lines
599 B

The `Flipper` shows two panels on the front and back of and lets you "flip" them around. This is a
decent way to restrict the user interface between two options, but it will most likely have problems
with accessibility without some additional `aria` attributes.
The technique uses the `transform-style: preserve-3d` to make sure that the browser treats it like a
3D space. Then it uses `transform: rotateY(180deg)` to do the flipping action.
You finally need these two lines to maintain the back and front:
```
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
```