Add flippable tarot cards

tarotcard-flip.css

@@ -0,0 +1,30 @@
+:root {
+    --min-flip-card-height: 80vh;
+}
+
+.tarot-card--flip-on-hover {
+    min-height: var(--min-flip-card-height);
+    perspective: 1000px;
+}
+
+.tarot-card--flip-on-hover:hover .tarot-card__content {
+    transform: rotateY(180deg);
+}
+
+.tarot-card--flip-on-hover .tarot-card__content {
+    transition: transform 800ms;
+    transform-style: preserve-3d;
+}
+
+.tarot-card__side {
+    position: absolute;
+
+    width: 100%;
+    height: 100%;
+
+    backface-visibility: hidden;
+}
+
+.tarot-card__side--back {
+    transform: rotateY(180deg);
+}

tarotcard.css

@@ -2,7 +2,8 @@
     --tarot-card-title-background-color: rgb(234, 191, 99);
 }
 
-* {
+*, *::before, *::after {
+    margin: 0;
     box-sizing: border-box;
 }
 

test/index.html

@@ -23,6 +23,11 @@
 				justify-content: space-evenly;
 				align-items: center;
 			}
+
+			#flip-card-back {
+				height: 100%;
+				background: white;
+			}
 		</style>
 
 		<link rel="stylesheet" href="styles/tarotcard.css"/>
@@ -33,6 +38,7 @@
 		<div class="center-grid">
 
 			<!-- Simplest possible card. Just displays a title and a piece of artwork. -->
+			<!--
 			<div id="simple-card" class="tarot-card">
 				<div class="tarot-card__content">
 					<div class="tarot-card__section tarot-card__section--art">
@@ -47,8 +53,10 @@
 					</div>
 				</div>
 			</div>
+			-->
 
 			<!-- Identical to The Simple Card, but uses the "deal" animation to slide in when the page is loaded. -->
+			<!--
 			<div id="deal-card" class="tarot-card tarot-card--deal">
 				<div class="tarot-card__content">
 					<div class="tarot-card__section tarot-card__section--art">
@@ -63,9 +71,10 @@
 					</div>
 				</div>
 			</div>
+			-->
 
 			<!-- Uses the "flip" animation to turn over to the other side when hovered on. -->
-			<div id="flip-card" class="tarot-card">
+			<div id="flip-card" class="tarot-card tarot-card--flip-on-hover">
 				<div class="tarot-card__content">
 					<div class="tarot-card__side tarot-card__side--front">
 						<div class="tarot-card__section tarot-card__section--art">
@@ -79,8 +88,11 @@
 							<p class="tarot-card__title">The Flip Card.</p>
 						</div>
 					</div>
+
 					<div class="tarot-card__side tarot-card__side--back">
-						<p>This is the back side of The Flip Card.</p>
+						<div id="flip-card-back" class="tarot-card__section">
+							<p>This is the back side of The Flip Card.</p>
+						</div>
 					</div>
 				</div>
 			</div>