<div class="deck">
<div class="ace card">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="card back" class="card-back">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/27/AS.svg" alt="Ace of spades" class="card-face">
</div>
<div class="two card">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="card back" class="card-back">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/de/2S.svg" alt="Two of spades" class="card-face">
</div>
<div class="three card">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="card back" class="card-back">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/3S.svg" alt="Three of spades" class="card-face">
</div>
<div class="four card">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="card back" class="card-back">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/4S.svg" alt="Four of spades" class="card-face">
</div>
<div class="five card">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="card back" class="card-back">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/ac/5S.svg" alt="Five of spades" class="card-face">
</div>
<div class="six card">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="card back" class="card-back">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/6S.svg" alt="Six of spades" class="card-face">
</div>
<div class="seven card">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="card back" class="card-back">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a1/7S.svg" alt="Seven of spades" class="card-face">
</div>
<div class="eight card">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="card back" class="card-back">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/36/8S.svg" alt="Eight of spades" class="card-face">
</div>
<div class="nine card">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="card back" class="card-back">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/31/9S.svg" alt="Nine of spades" class="card-face">
</div>
<div class="ten card">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="card back" class="card-back">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/16/10S.svg" alt="10 of spades" class="card-face">
</div>
<div class="jack card">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="card back" class="card-back">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d9/JS.svg" alt="Jack of spades" class="card-face">
</div>
<div class="queen card">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="card back" class="card-back">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/35/QS.svg" alt="Queen of spades" class="card-face">
</div>
<div class="king card">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Card_back_06.svg" alt="card back" class="card-back">
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/KS.svg" alt="King of spades" class="card-face">
</div>
</div>
:root {
--animate-time: 1.5s;
}
body {
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
background: green;
}
.deck {
transform-style: preserve-3d;
position: absolute;
left: calc(50% - 100px);
top: 25px;
}
.card {
display: inline-block;
width: 200px;
height: 290px;
position: absolute;
top: 0;
left: 0;
transition: transform var(--animate-time);
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-origin: center 150%;
> img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: transform var(--animate-time);
}
}
.card-face {
transform: rotateY(.5turn) translateZ(2px);
}
.card-back {
transform: rotateY(.5turn) translateZ(-2px);
}
body:hover img {
transform: rotateY(0);
}
//==== Specific Cards ====
$numcards: 13;
$ystep: -20grad/(($numcards - 1) / 2);
$zstep: 50grad/(($numcards - 1) / 2);
$vertstep: 25px;
@mixin flourish($className, $n) {
#{$className} {
--n: #{$n};
transform: translateZ(-$vertstep * $n);
}
body:hover #{$className} {
transform:
translateZ($vertstep * $n)
rotateY($ystep * $n)
rotateZ($zstep * $n);
}
}
$cards: ('.ace', '.two', '.three', '.four', '.five', '.six', '.seven', '.eight', '.nine', '.ten', '.jack', '.queen', '.king');
@each $card in $cards {
$i: index($cards, $card) - ($numcards + 1) / 2;
@include flourish($card, $i);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.