CodePen Embed - Animated 3D Playing Card with Randomization

<svg>
  <symbol viewBox="0 0 36 45" id="spade">
    <path fill="currentColor" d="M18,0 l8,6 a25,25 0 0 1 10,20 a10,10 0 0 1 -10,10 a5,5 0 0 1 -5,-5 h-2 v5 a15,15 0 0 0 3,9 h-8 a15,15 0 0 0 3,-9 v-5 h-2 a5,5 0 0 1 -5,5 a10,10 0 0 1 -10,-10 a25,25 0 0 1 10,-20 l8,-6"/>
  </symbol>
  
  <symbol viewBox="0 0 36 45" id="heart">
    <path fill="currentColor" d="M16,10 a2,2 0 0 0 4,0 a6,6 0 0 1 6,-6 a10,10 0 0 1 8,16 l-16,21 l-16,-21 a10,10 0 0 1 8,-16 a6,6 0 0 1 6,6"/>
  </symbol>
  
  <symbol viewBox="0 0 36 45" id="club">
    <path fill="currentColor" d="M18,0 a10,10 0 0 1 10,10 a5,5 0 0 1 -5,5 l2,4 a5,5 0 0 1 7,-1 a10,10 0 0 1 -6,18 a5,5 0 0 1 -5,-5 h-2 v5 a15,15 0 0 0 3,9 h-8 a15,15 0 0 0 3,-9 v-5 h-2 a5,5 0 0 1 -5,5 a10,10 0 0 1 -6,-18 a5,5 0 0 1 7,1 l2,-4 a5,5 0 0 1 -5,-5 a10,10 0 0 1 10,-10"/>
  </symbol>
  
  <symbol viewBox="0 0 36 45" id="diamond">
    <path fill="currentColor" d="M18,0 l18,22.5 l-18,22.5 l-18,-22.5 z"/>
  </symbol>
  
  <symbol viewbox="0 0 36 45" id="jack">
    <path fill="currentColor" d="M1,0 h34 l-6,11 a20,20 0 0 1 0,24 a10,10 0 0 0 -2,6 a3,3 0 0 0 3,3 v-2 a3,3 0 1 1 3,3 h-30 a3,3 0 1 1 3,-3 v2 a3,3 0 0 0 3,-3 a10,10 0 0 1 -2,-6 v-24 z m6,11 h14 a20,20 0 0 1 0,24 a10,10 0 0 0 -2,6 a4,4 0 0 0 4,4 h-6 a10,10 0 0 1 -10,-10 z" fill-rule="evenodd"/>
  </symbol>
  
  <symbol viewbox="0 0 36 45" id="queen">
    <path fill="currentColor" d="M9,18 a15,15 0 0 0 -3,-9 a7.5,7.5 0 0 0 12,-6 a7.5,7.5 0 0 0 12,6 a15,15 0 0 0 -3,9 a45,45 0 0 1 9,27 h-36 a45,45 0 0 1 9,-27 z m-4,7 a10,10 0 0 0 10,-10 a9,9 0 0 0 9,9 v3 a30,30 0 0 0 6,18 h-12 a13,13 0 0 1 -13,-13 z" fill-rule="evenodd"/>
    <circle fill="currentColor" cx="4" cy="7" r="1"/>
    <circle fill="currentColor" cx="18" cy="1" r="1"/>
    <circle fill="currentColor" cx="32" cy="7" r="1"/>
  </symbol>
  
  <symbol viewbox="0 0 36 45" id="king">
    <path fill="currentColor" d="M3,6 l10,7 l5,-9 l5,9 l10,-7 l-2,11 v8 a15,15 0 0 0 3,9 a10,10 0 0 1 2,6 a5,5 0 0 1 -5,5 h-26 a5,5 0 0 1 -5,-5 a10,10 0 0 1 2,-6 a15,15 0 0 0 3,-9 v-8 z m2,11 h16 v6 a20,20 0 0 0 4,12 a10,10 0 0 1 2,6 a3,3 0 0 1 -3,3 v-2 a3,3 1 1 0 -3,3 h-3 a13,13 0 0 1 -13,-13 z" fill-rule="evenodd"/>
    <circle fill="currentColor" cx="1" cy="3" r="1"/>
    <circle fill="currentColor" cx="18" cy="1" r="1"/>
    <circle fill="currentColor" cx="35" cy="3" r="1"/>
  </symbol>
  
  <symbol viewBox="0 0 300 420" id="card-front">
    <path stroke="currentColor" d="M78,30 h144 a34,34 0 0 0 48,48 v264 a34,34 0 0 0 -48,48 h-144 a34,34 0 0 0 -48,-48 v-264 a34,34 0 0 0 48,-48"/>
  </symbol>
  
  <symbol viewBox="0 0 300 420" id="card-back">
    <rect x="12" y="12" width="276" height="396" rx="8"/>
    <path d="M52,30 h196 a17,17 0 0 0 22,22 v316 a17,17 0 0 0 -22,22 h-196 a17,17 0 0 0 -22,-22 v-316 a17,17 0 0 0 22,-22"/>
    <circle cx="36" cy="36" r="6"/>
    <circle cx="264" cy="36" r="6"/>
    <circle cx="36" cy="384" r="6"/>
    <circle cx="264" cy="384" r="6"/>
    <path d="M128,188 l44,44 m0,-44 l-44,44 m-38,-13 a9,9 0 0 1 0,-18 a69,69 0 0 1 69,69 a9,9 0 0 1 -18,0 a69,69 0 0 1 69,-69 a9,9 0 0 1 0,18 a69,69 0 0 1 -69,-69 a9,9 0 0 1 18,0 a69,69 0 0 1 -69,69"/>
    <circle cx="115" cy="175" r="2"/>
    <circle cx="185" cy="175" r="2"/>
    <circle cx="115" cy="245" r="2"/>
    <circle cx="185" cy="245" r="2"/>
  </symbol>
</svg>

<h1>Flip card to randomize it</h1>

<div class="card-container flipped">
  <div class="card">
    <div class="front">
      <svg viewBox="0 0 300 420">
        <use xlink:href="#card-front"/>
        <text class="rank" x="53" y="51" text-anchor="middle"></text>
        <text class="rank" x="247" y="365" text-anchor="middle" transform="rotate(180, 247, 367)"></text>
        <use class="suit" xlink:href="#" x="229" y="29" width="36" height="45"/>
        <use class="suit" xlink:href="#" x="35" y="346" width="36" height="45" transform="rotate(180, 53, 368.5)"/>
      </svg>
    </div>
    <div class="back">
      <svg viewBox="0 0 300 420">
        <use xlink:href="#card-back"/>
      </svg>
    </div>
  </div>
</div>

@import url("https://fonts.googleapis.com/css?family=Quicksand:700");

$red: hsl(15, 60%, 40%);
$white: hsl(43, 100%, 95%);
$blue: hsl(215, 15%, 20%);
$black: hsl(43, 5%, 20%);

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  background: $blue;
  color: $white;
  display: flex;
  font-family: "Quicksand", sans-serif;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  text-align: center;
}

.card-container,
.card,
.front,
.back {
  height: 42vmin;
  width: 30vmin;
}

.card-container {
  margin: 5vmin;
  position: relative;
  perspective: 90vmin;
  perspective-origin: bottom;
  -webkit-tap-highlight-color: rgba(0,0,0,0);

  &:hover .card {
    box-shadow: 1vmin 5vmin 4vmin rgba(0, 0, 0, 0.15), 0.5vmin 4vmin 3vmin rgba(0, 0, 0, 0.10);
    transform: rotateX(30deg) rotateZ(30deg) translateZ(10vmin) rotateY(0deg) rotateX(-45deg);
  }
  
  &.flipped:hover .card {
    box-shadow: -1vmin 5vmin 4vmin rgba(0, 0, 0, 0.15), -0.5vmin 4vmin 3vmin rgba(0, 0, 0, 0.10);
    transform: rotateX(30deg) rotateZ(30deg) rotateY(180deg) translateZ(-10vmin) rotateX(45deg);
  }
  
  &.flipped .card {
    box-shadow: -1vmin 1vmin 2vmin rgba(0,0,0,0.19), -1vmin 1vmin 0.5vmin rgba(0,0,0,0.23);
    transform: rotateX(30deg) rotateZ(30deg) rotateY(180deg);
  }

  .card {
    background: $white;
    border-radius: 2vmin;
    box-shadow: 1vmin 1vmin 2vmin rgba(0,0,0,0.19), 1vmin 1vmin 0.5vmin rgba(0,0,0,0.23);
    cursor: pointer;
    position: relative;
    transition: transform 0.35s ease-out, box-shadow 0.35s ease-out;
    transform: rotateX(30deg) rotateZ(30deg) rotateY(0deg);
    transform-style: preserve-3d;
    user-select: none;

    .front,
    .back {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      position: absolute;
      top: 0;
      left: 0;
    }

    .front {
      z-index: 2;
      transform: rotateY(0deg);
    }

    .back {
      transform: rotateY(180deg);
    }
  }
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  fill: none;
  stroke: $white;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  
  symbol {
    overflow: visible;
  }
  
  text {
    font-size: 3rem;
    text-anchor: middle;
    alignment-baseline: central;
    stroke-width: 2;
    fill: currentColor;
  }
  
  text.underline {
    text-decoration: underline;
  }
  
  .suit {
    stroke-width: 4;
  }
  
  #card-back {
    fill: $red;
    
    circle {
      fill: $white;
    }
  }
  
  &.black {
    color: $black;
    stroke: $black;
  }
  
  &.red {
    color: $red;
    stroke: $red;
  }
}

h1 {
  font-size: 5vmin;
}

View Compiled

$(document).ready(function() {
  const RANKS = ['A', 2, 3, 4, 5, 6, 7, 8, 9, 10, 'J', 'Q', 'K'],
        SUITS = [
    {suit: 'spade',   color: 'black'},
    {suit: 'heart',   color: 'red'},
    {suit: 'club',    color: 'black'},
    {suit: 'diamond', color: 'red'}
  ],
        COORDS = [
    [0, 0], [1, 0], [2, 0], [1, 2], [1, 3], [0, 4], [2, 4], [0, 6], [1, 6], [2, 6], [0, 8], [2, 8], [1, 9], [1, 10], [0, 12], [1, 12], [2, 12]
  ],
        PIPS = {
    'A':  {scale: 3,    locs: [8]},
    2:    {scale: 2,    locs: [1, 15]},
    3:    {scale: 1,    locs: [1, 8, 15]},
    4:    {scale: 1,    locs: [0, 2, 14, 16]},
    5:    {scale: 1,    locs: [0, 2, 8,  14, 16]},
    6:    {scale: 1,    locs: [0, 2, 7,  9,  14, 16]},
    7:    {scale: 0.75, locs: [0, 2, 4,  7,  9, 14, 16]},
    8:    {scale: 0.75, locs: [0, 2, 5,  6,  10, 11, 14, 16]},
    9:    {scale: 0.75, locs: [0, 2, 5,  6,  8,  10, 11, 14, 16]},
    10:   {scale: 0.75, locs: [0, 2, 3,  5,  6,  10, 11, 13, 14, 16]},
    'J':  {scale: 2.50, locs: [1, 15], symbol: 'jack'},
    'Q':  {scale: 2.50, locs: [1, 15], symbol: 'queen'},
    'K':  {scale: 2.50, locs: [1, 15], symbol: 'king'}
  },
        PIP_WIDTH = 36,
        PIP_HEIGHT = 45,
        X_OFFSET = 100,
        Y_OFFSET = 135;
  
  $('.card-container').click(function() {
    $('h1').fadeTo('slow', 0);
    
    if($(this).hasClass('flipped')) {
      let randSuit = SUITS[Math.floor(Math.random() * SUITS.length)];
      let randRank = RANKS[Math.floor(Math.random() * RANKS.length)];
      
      $('.pip', this).remove();
      $('.rank', this).text(randRank);
      $('.rank', this).toggleClass('underline', (randRank == 6 || randRank == 9));
      $('.front svg', this).attr('class', randSuit.color);
      $('.suit', this).attr('xlink:href', '#' + randSuit.suit);
      
      let width = PIP_WIDTH * PIPS[randRank].scale, height = PIP_HEIGHT * PIPS[randRank].scale,
          href = '#' + randSuit.suit;
      
      if (PIPS[randRank].symbol !== undefined) {
        href = '#' + PIPS[randRank].symbol;
      }
      
      for (let pip of PIPS[randRank].locs) {
        let x = (COORDS[pip][0] * 50) + X_OFFSET - (width/2),
            y = (COORDS[pip][1] * 12.5) + Y_OFFSET - (height/2),
            symbol = document.createElementNS('http://www.w3.org/2000/svg', 'use');
        
        symbol.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', href);
        symbol.setAttribute('class', 'suit pip');
        symbol.setAttribute('x', x);
        symbol.setAttribute('y', y);
        symbol.setAttribute('width', width);
        symbol.setAttribute('height', height);
        if (pip > 9) {
          symbol.setAttribute('transform', 'rotate(180, ' + (x + (width/2)) + ', ' + (y + (height/2)) + ')');
        }
        $('.front svg', this).append(symbol);
      }
    }
    
    $(this).toggleClass('flipped');
  });
});

This Pen is owned by Aaron Griffis on CodePen.

See more by @aarongriffis on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js