This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
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-template/admin/bando/demos/Flipper.svelte.md

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;