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