This is the code that runs https://bandolier.learnjsthehardway.com/ for you to review. It uses the https://git.learnjsthehardway.com/learn-javascript-the-hard-way/bandolier-template to create the documentation for the project.
https://bandolier.learnjsthehardway.com/
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.
14 lines
599 B
14 lines
599 B
2 years ago
|
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;
|
||
|
|
```
|