TheMagician
/
tarotcard.css
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add automatic flip animation

This commit is contained in:
The Magician 2023-12-02 13:30:23 +00:00
parent 3b4abe6468
commit 12f7dfb42e
2 changed files with 43 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
tarotcard-flip.css
View File

@ -2,8 +2,22 @@
--min-flip-card-height: 80vh; --min-flip-card-height: 80vh;
} }
.tarot-card--flip-on-hover { @keyframes flip-card {
to {
transform: rotateY(180deg);
}
}
.tarot-card--flip-on-hover,
.tarot-card--flip-automatically {
min-height: var(--min-flip-card-height); min-height: var(--min-flip-card-height);
}
.tarot-card--flip-automatically .tarot-card__content {
animation: flip-card 800ms 2s forwards;
}
.tarot-card--flip-on-hover {
perspective: 1000px; perspective: 1000px;
} }
@ -11,7 +25,8 @@
transform: rotateY(180deg); transform: rotateY(180deg);
} }
.tarot-card--flip-on-hover .tarot-card__content { .tarot-card--flip-on-hover .tarot-card__content,
.tarot-card--flip-automatically .tarot-card__content {
transition: transform 800ms; transition: transform 800ms;
transform-style: preserve-3d; transform-style: preserve-3d;
} }

29
test/index.html
View File

@ -24,7 +24,7 @@
align-items: center; align-items: center;
} }
#flip-card-back { .flip-card-back-section {
height: 100%; height: 100%;
background: white; background: white;
} }
@ -90,7 +90,7 @@
</div> </div>
<div class="tarot-card__side tarot-card__side--back"> <div class="tarot-card__side tarot-card__side--back">
<div id="flip-card-back" class="tarot-card__section"> <div class="tarot-card__section flip-card-back-section">
<p>This is the back side of The Flip Card.</p> <p>This is the back side of The Flip Card.</p>
</div> </div>
</div> </div>
@ -114,13 +114,36 @@
</div> </div>
<div class="tarot-card__side tarot-card__side--back"> <div class="tarot-card__side tarot-card__side--back">
<div id="flip-card-back" class="tarot-card__section"> <div class="tarot-card__section flip-card-back-section">
<p>This is the back side of The Deal/Flip Card.</p> <p>This is the back side of The Deal/Flip Card.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Uses the "automatic flip" animation. -->
<div id="flip-card" class="tarot-card tarot-card--flip-automatically">
<div class="tarot-card__content">
<div class="tarot-card__side tarot-card__side--front">
<div class="tarot-card__section tarot-card__section--art">
<img class="tarot-card__art"
src="images/card_art_std.jpg"
alt="The Autoflip Card artwork image."
title="The Autoflip Card artwork image." />
</div>
<div class="tarot-card__section tarot-card__section--title">
<p class="tarot-card__title">The Autoflip Card.</p>
</div>
</div>
<div class="tarot-card__side tarot-card__side--back">
<div class="tarot-card__section flip-card-back-section">
<p>This is the back side of The Autoflip Card.</p>
</div>
</div>
</div>
</div>
</div> </div>
</body> </body>