Edit on
<h1>Demo Card Game UI Prototype</h1>
<h3>Using SASS and CSS transforms with backface-visibility</h3>
<input class="deal" type="button" value="Deal">
<div class="deck">
  <div class="card card1">
      <div class="face front">front</div>
      <div class="face back"></div>
  </div>
  <div class="card card2">
      <div class="face front">front</div>
      <div class="face back"></div>
  </div>
  <div class="card card3">
      <div class="face front">front</div>
      <div class="face back"></div>
  </div>
  <div class="card card4">
      <div class="face front">front</div>
      <div class="face back"></div>
  </div>
  <div class="card card5">
      <div class="face front">front</div>
      <div class="face back"></div>
  </div>
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto);

* {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 100%; 
  height: 100%;
  zoom: 1;
}

h1, h3 {
  display: block;
  margin: 10px;
}

h1 {
  color: #666;
  font-size: 1.2em; 
  font-weight: bold;
}

h3 {
  color: #888;
}

p {
  font-size: 1em;
  line-height: 1.4em;
}

a {
  color: white;
}

a, a:hover {
  text-decoration: none;
}

blockquote {
  color: #888;
  margin: 20px 0 20px 20px;
}

blockquote:before,
blockquote:after{
  content: '"';
}

@mixin uppercase {
  text-transform: uppercase;
}

@mixin center {
  margin: 0 auto;
}

@mixin rounded($amount) {
  border-radius: $amount;
}

input[type="button"] {
  background: blue;
  border: none;
  color: white;
  text-transform: uppercase;
  width: 100px;
  height: 45px;
  padding: 5px;
  outline: 0;
  cursor: pointer;
  @include rounded(5px); 
}

input.discard {
  background: maroon;
}

/*.intro {
  position: relative;
  margin: 10px;
  width: 40%;
  height: auto;
  color: #444;
}*/

@mixin deck {
  position: relative;
  background: transparent;
  margin: 3em;
  width: 99%;
  height: auto;
}

@mixin card {
  position: relative;
  display: inline-block;
  background: transparent;
  color: #000;
  width: 150px;
  height: 200px;
  margin-right: 20px;
  cursor: pointer;
}

.deck {
  @include deck;
}

.card {
  @include card;
}

.suit {
  position: relative;
  color: #AAA;
  text-align: left;
}

.card .face {
  position: absolute;
  border: 1px solid #333;
  color: white;
  width: 150px;
  height: 200px;
  line-height: 3em;
  text-align: center;
  text-transform: capitalize;
  @include rounded(10px); 
  box-shadow: 4px 4px 10px #555; /* Slim drop shadow so as not to bleed into the bounding box of the next card  */
}

.card .front {
  background: olive;
  transform: rotateX(0deg) rotateY(0deg);
  transition: all .4s ease-in-out;
  backface-visibility: visible;
  z-index: 10;
}

.card:nth-child(1) {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(-45deg);
  animation: drop1 .5s ease-in;
}

.card:nth-child(2) {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(-20deg);
  animation: drop2 .5s ease-in;
}

.card:nth-child(3) {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  animation: drop3 .5s ease-in;
}

.card:nth-child(4) {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(20deg);
  animation: drop4 .5s ease-in;
}

.card:nth-child(5) {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(40deg);
  animation: drop5 .5s ease-in;
}

/* Deal cards and apply some random spin  */
@keyframes drop1 {
  0% {
   transform: scale(2, 2) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  50% {
   transform: rotateX(0deg) rotateY(0deg) rotateZ(-25deg); 
  }
  100% {
    transform: scale(.97, .97) rotateX(0deg) rotateY(0deg) rotateZ(-45deg);
  }
}

@keyframes drop2 {
  0% {
   transform: scale(2, 2) rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
  }
  50% {
   transform: rotateX(0deg) rotateY(0deg) rotateZ(-10deg); 
  }
  100% {
    transform: scale(.97, .97) rotateX(0deg) rotateY(0deg) rotateZ(-20deg);
  }
}

@keyframes drop3 {
  0% {
   transform: scale(2, 2) rotateX(0deg) rotateY(0deg) rotateZ(-50deg); 
  }
  50% {
   transform: rotateX(0deg) rotateY(50deg) rotateZ(25deg); 
  }
  100% {
    transform: scale(.98, .98) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
}

@keyframes drop4 {
  0% {
   transform: scale(2, 2) rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
  }
  50% {
   transform: rotateX(0deg) rotateY(0deg) rotateZ(10deg); 
  }
  100% {
    transform: scale(.98, .98) rotateX(0deg) rotateY(0deg) rotateZ(20deg);
  }
}

@keyframes drop5 {
  0% {
   transform: scale(2, 2) rotateX(0deg) rotateY(0deg) rotateZ(0deg); 
  }
  50% {
   transform: rotateX(0deg) rotateY(50deg) rotateZ(-10deg); 
  }
  100% {
    transform: scale(.98, .98) rotateX(0deg) rotateY(0deg) rotateZ(40deg);
  }
}

.card .back {
  background: purple;
  transform: rotateX(0deg) rotateY(180deg);
  transform-style: preserve-3d;
  transition: all .4s ease-in-out;
  backface-visibility: hidden;
  z-index: 5;
}

/* Flip the card and apply easing */
.card.flip .front {
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  transition: all .4s ease-in-out;
  backface-visibility: hidden;
  z-index: 900;
}

.card.flip .back {
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  transition: all .4s ease-in-out;
  backface-visibility: visible;
  z-index: 1000;
}
View Compiled
// Card Js by James Pickering
delay = 500; //delay the effect
fadetime = 500; // fade in time
// var clicked = false; // set flag for clicked state
//lastClicked = ""; // last card clicked
suit = ["clubs", "hearts", "diamonds", "spades"];
deck = ["ace",2,3,4,5,6,7,8,9,10,"jack","queen","king"];

// Modified Shuffle by Chris Coyier
// https://css-tricks.com/snippets/javascript/shuffle-array/
function shuffle(o) {
	for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
	return o;
};

// Random suit
function getSuit() {
  var x = parseInt(Math.random() * 4);
  return suit[x];
}

// Deal new card from deck
function getCards() {
  for(var i=0; i<=deck.length; i++) {
    var str = ".card" + i;
    var str2 = " .front";
    var el = str.concat(str2);
    var output = deck[i] + " of " +getSuit(); 
    $(el).text(output);
  }
}

// Deal cards in sequence
function deal(){
  $('.card').hide();
  clicked = false; // set flag for clicked state
  shuffle(deck);
  getCards();
  $('.card1').delay(delay).fadeIn(fadetime);
  $('.card2').delay(delay*2).fadeIn(fadetime);
  $('.card3').delay(delay*3).fadeIn(fadetime);
  $('.card4').delay(delay*4).fadeIn(fadetime);
  $('.card5').delay(delay*5).fadeIn(fadetime);
}
deal();

$('.deal').click(function(){
	deal();
});

$('.card').click(function(){
  $(this).toggleClass('flip');
});
Rerun