diff --git a/public/lab/cardflip.css b/public/lab/cardflip.css new file mode 100644 index 00000000..5efec3ad --- /dev/null +++ b/public/lab/cardflip.css @@ -0,0 +1,44 @@ +/* entire container, keeps perspective */ +.flip-container { + perspective: 1000; +} +/* flip the pane when hovered */ +.flip-container:hover .flipper, .flip-container.hover .flipper { + transform: rotateY(180deg); +} + +.flip-container, .front, .back { + width: 320px; + height: 480px; +} + +/* flip speed goes here */ +.flipper { + transition: 0.6s; + transform-style: preserve-3d; + + position: relative; +} + +/* hide back of pane during swap */ +.front, .back { + backface-visibility: hidden; + + position: absolute; + top: 0; + left: 0; +} + +/* front pane, placed above back */ +.front { + z-index: 2; +} + +/* back, initially hidden pane */ +.back { + transform: rotateY(180deg); +} + +.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper { + transform: rotateY(180deg); +} diff --git a/public/lab/scribe.html b/public/lab/scribe.html new file mode 100644 index 00000000..665ac76b --- /dev/null +++ b/public/lab/scribe.html @@ -0,0 +1,121 @@ + +
+ +