Fire JS Bin - CSS3Memory

var animating;
$(document).ready(function () {
  var cardtype_count = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
  for (var i = 0; i < 36; i++) {
    var card_selected = false;
    var c = 0;
    while (!card_selected) {
      c = Math.floor(Math.random() * 13);
      if (cardtype_count[c] < 3) {
        cardtype_count[c]++;
        card_selected = true;
      }
    }
    $(".gameboard ul").html($(".gameboard ul").html() + '<li id="card-' + (i + 1) + '" class="card card-' + (c + 1) + (Math.floor(Math.random() * 101) > 50 ? ' card-alt' : '') + '"><span></span><span class="back">&</span></li>');
  }
  $(".card").bind('click', selectCard);
});

function selectCard() {
  $(".card:not(.card-selected)").removeClass('card-selected');
  if (!animating) $(this).addClass('card-selected');
  if ($(".card-selected").length >= 3) {
    checkCards();
  }
}

function turnBoard() {
  if (Math.random() < 0.25) {
    $(".gameboard").attr("class", "gameboard gameboard-alt" + Math.ceil(Math.random() * 2));;
  }
}

addEventListener("load", function () {
  setTimeout(hideURLbar, 0);
}, false);

function hideURLbar() {
  window.scrollTo(0, 1);
}

<!DOCTYPE html>
<html lang="en-us">
  
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,initial-scale=1.0">
    <title>CSS3 Memory (10k version)</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <section class="game">
      <section class="information">
        <h1>CSS3 Memory</h1>
        <p>
          <span>A game of memory in which you will have to</span>
          <strong>find three matching ampersands.</strong>
          <span>
            (as a tribute to the
            <abbr title="Cascading Style Sheets">CSS</abbr>
            level used for the transitions)
          </span>
        </p>
        <p class="credits">
          Crafted with love by
          <a href="http://www.maykelloomans.com/">Maykel Loomans</a>.
        </p>
      </section>
      <section class="gameboard">
        <ul></ul>
        <p class="win">You won! Woohoo!</p>
      </section>
    </section>
  </body>

</html>

* { border:0; outline:0; font-size:100%; vertical-align:baseline; text-decoration:none; margin:0; padding:0 }
:focus { outline:0 }
html, body { height:100% }
body { background:#fff; font:62.5%/20px Arial, Helvetica, sans-serif; }
article, section, header, footer, nav { display:block }
ul, ol { list-style:none }
@-webkit-keyframes highlight { 0% { color:#999;   }
  50% { color:#fff; }
  100% { color:#999; }
}
body, a, a:visited, a:active, a:hover { color:#ddd; }
.game { font-size:1.3em; }
h1, p { margin:0 0 20px; }
h1, .win { font-family:Helvetica, Arial, sans-serif; font-size:48px; font-weight:bold; text-transform:uppercase; text-align:center; line-height:48px; }
h1 a { text-decoration:none; }
p { font-family:Georgia, Times, "Times New Roman", serif; font-size:15px; line-height:24px; margin:0 0 24px; }
abbr { border-bottom:1px dotted #aaa; }
.information p a { color:#ff6; }
.information p a:hover { color:#fff; text-decoration:none; }
.credits { font-size:13px; }
.card { color:#000; text-align:center; line-height:72px; font-size:72px; }
body { background:#333; }
.game { margin:15px 0 0; padding:0 0 20px; background:#555; border-top:1px solid rgba(255, 255, 255, 0.15); border-bottom:1px solid rgba(255, 255, 255, 0.10); box-shadow:rgba(0, 0, 0, 0.5) 0 1px 0; -webkit-box-shadow:rgba(0, 0, 0, 0.5) 0 1px 0; -moz-box-shadow:rgba(0, 0, 0, 0.5) 0 1px 0; }
.information { padding:40px 20px 20px; z-index:20; }
.gameboard { width:600px; height:600px; margin:0 auto 20px; }
.gameboard { position:relative; }
.gameboard-reset { right:-600px; }
.gameboard ul { width:600px; height:600px; -webkit-transition-property:all; -webkit-transition-duration:0.5s; padding:20px 0 0 20px; background:#666; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; border:1px solid rgba(255, 255, 255, 0.2); box-shadow:rgba(0, 0, 0, 0.6) 0 0 2px; -webkit-box-shadow:rgba(0, 0, 0, 0.6) 0 0 2px; -moz-box-shadow:rgba(0, 0, 0, 0.6) 0 0 2px; }
@media screen and (max-width:960px) {
  .information { position:relative; margin:0 auto; overflow:auto; }
  h1, .information { width:560px; text-align:left; }
  .information p { float:left; display:inline; width:260px; margin-right:40px; }
  .credits { width:160px; margin-right:0 !important; }
  .gameboard .win { margin-top:-10px; }
}
@media screen and (min-width:960px), screen and (max-width:480px) {
  h1 { width:auto; }
  .information { width:258px; margin:0 auto; }
}
@media screen and (min-width:960px) {
  .game { position:relative; top:15px; min-height:640px; min-width:960px; margin:0;   }
  .information { position:absolute; margin:0 10px 20px; height:600px; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.9); }
  .credits { position:absolute; bottom:20px; }
  .gameboard { padding:20px 0 0 260px; } 
}
@media screen and (max-width:480px) {
  h1 { font-size:20px; line-height:20px; }
  p, .credits { font-size:12px; line-height:18px; margin:0 0 10px; }
  .game { height:440px; }
  body, .game { margin:0 !important; padding:0 !important; }
  .game { overflow:hidden; }
  .gameboard { width:310px; height:310px; margin:0 auto 40px; overflow:visible; z-index:50; -webkit-transform:scale(0.5); -webkit-transform-origin:0 0; -moz-transform:scale(0.5); -moz-transform-origin:0 0; }
  img { display:none !important; }
  .gameboard .win { margin-top:-20px; }
  .information { padding:20px 20px 10px; }
  .credits, .information span { display:none !important; }
  .information strong { display:inline-block; font-weight:normal; font-style:italic; }
  .information strong::first-letter { text-transform:uppercase; }
  h1 { margin:0 0 10px; }
}
.card { position:relative; width:80px; height:80px; margin:0 20px 20px 0; float:left; display:inline; -webkit-perspective:500; -webkit-transition-property:all; -webkit-transition-duration:0.5s; }
.card span { position:absolute; top:0; left:0; display:block; width:70px; height:70px; -webkit-transition-property:transform; -webkit-transition-duration:0.3s; -webkit-transition-timing-function:ease-out; -webkit-backface-visibility:hidden; -webkit-transform-style:preserve-3d; border-radius:12px; -webkit-border-radius:12px; -moz-border-radius:12px; box-shadow:#000 0 1px 2px; -webkit-box-shadow:#000 0 1px 2px; -moz-box-shadow:rgba(0, 0, 0, 0.5) 0 1px 2px; border:5px solid #fff; }
.card span { -webkit-transform:rotateY(0deg); background:#eee url(/attach/cardback_patt.min.png) repeat 1px 1px; z-index:900; }
.card span.back { -webkit-transform:rotateY(-180deg); background:#fff; z-index:800; }
.card-selected span { -webkit-transform:rotateY(180deg); border-radius:14px; -webkit-border-radius:14px; box-shadow:#333 0 2px 4px; -webkit-box-shadow:#333 0 2px 4px; }
.card-selected span.back { -webkit-transform:rotateY(0deg); z-index:1000; }
.card-alt span { -webkit-transform:rotateX(0deg); }
.card-alt span.back { -webkit-transform:rotateX(-180deg); }
.card-alt.card-selected span { -webkit-transform:rotateX(180deg); }
.card-alt.card-selected span.back { -webkit-transform:rotateX(0); }
.card-1 span.back { font-family:"American Typewriter", "Comic Sans MS", "Comic Sans"; color:#666; }
.card-2 span.back { font-family:"Andale Mono", "Courier New"; }
.card-3 span.back { font-family:"Baskerville", "Cambria", "Sylfaen"; font-style:italic; color:#fc9; }
.card-4 span.back { font-family:"Georgia"; color:#630; }
.card-5 span.back { font-family:"Times", "Times New Roman"; font-style:italic; font-weight:bold; }
.card-6 span.back { color:#ccf; background:#000; font-family:"Trebuchet MS"; }
.card-7 span.back { font-family:"Verdana"; color:#0cf; }
.card-8 span.back { font-family:"Palatino", "Palatino Linotype"; font-style:italic; }
.card-9 span.back { font-family:"Cochin", "Impact"; color:#a0a; }
.card-10 span.back { font-family:"Hoefler Text", "Franklin Gothic Medium"; font-style:italic; color:#aaa; }
.card-11 span.back { font-family:"Courier", "Courier New"; color:#f00; }
.card-12 span.back, .card-0 span.back { color:#fff; background:#666; }
.gameboard-alt1 ul { -webkit-transform:rotate(90deg); }
.gameboard-alt1 ul .card { -webkit-transform:rotate(-90deg); }
.gameboard-alt2 ul { -webkit-transform:rotate(-90deg); }
.gameboard-alt2 ul .card { -webkit-transform:rotate(90deg); }
.gameboard .win { width:300px; height:40px; position:absolute; top:50%; right:0; display:none; -webkit-animation-name:highlight; -webkit-animation-duration:0.5s; -webkit-animation-iteration-count:infinite; text-shadow:rgba(0, 0, 0, 0.5) 0 -1px 0; -webkit-text-shadow: rgba(0, 0, 0, 0.5) 0 -1px 0; }