Add flippable tarot cards

This commit is contained in:
The Magician 2023-12-02 13:12:22 +00:00
parent e36272d785
commit 90bb595971
3 changed files with 46 additions and 3 deletions

View File

@ -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);
}

View File

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

View File

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