diff options
| author | Adam Carpenter <atc@53hor.net> | 2020-04-23 20:47:55 -0400 |
|---|---|---|
| committer | Adam Carpenter <atc@53hor.net> | 2020-04-23 20:47:55 -0400 |
| commit | ed3a2fc8aeb2e5eb2b99925c9a2613f091355083 (patch) | |
| tree | d9f080d3605a1a223239c205d4a0e6c2544b951b /src/scss/flash-card.scss | |
| parent | ac6ea8dc4da8be20f69088ee71f32b05339c910c (diff) | |
| download | carpentertutoring-ed3a2fc8aeb2e5eb2b99925c9a2613f091355083.tar.xz carpentertutoring-ed3a2fc8aeb2e5eb2b99925c9a2613f091355083.zip | |
those weren't the modals she's looking for...
Diffstat (limited to 'src/scss/flash-card.scss')
| -rw-r--r-- | src/scss/flash-card.scss | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/src/scss/flash-card.scss b/src/scss/flash-card.scss new file mode 100644 index 0000000..5ba4ce9 --- /dev/null +++ b/src/scss/flash-card.scss @@ -0,0 +1,38 @@ +.flash-card { + background-color: transparent; + width: 100%; + height: 200px; + perspective: 1000px; +} + +.flash-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.5s; + transform-style: preserve-3d; +} + +.flash-card:hover .flash-card-inner { + transform: rotateY(180deg); +} + +.flash-card-front, +.flash-card-back { + position: absolute; + width: 100%; + height: 100%; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +.flash-card-front { + border-radius: $box-radius; + line-height: 150px; +} + +.flash-card-back { + border-radius: $box-radius; + transform: rotateY(180deg); +} |