Random card thing.

Had an hour to kill.

by dievardump

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.6/prefixfree.min.js"></script>

CSS

.card {
    background: #fff;
    position: absolute;
    border-radius: 6px;
    height: 80px;
    width: 60px;
    border: 1px solid #000;
    float:left;
    transform-origin: 50% 100%;
    animation-name:             dostuff; 
    animation-duration:         3s; 
    animation-iteration-count:  infinite;
    transition-timing-function: linear;
    
}
.card:after, .card:before { 
    content: attr(data-number) " " attr(data-suit);
    position: absolute;
}
.card:before { 
    top: 10px;
    left: 10px;
}
.card:after { 
    bottom: 10px;
    right: 10px;
    transform: rotate(180deg);
}

@keyframes dostuff{
  0%{
        left:0%;
    transform: rotate(0deg);
  }
  50%{ 
    left:50%;
    transform: rotate(360deg);
  }
  100%{
    left:0%;
    transform: rotate(0deg);
  }
}

JavaScript

var cards = [];

function initDeck(){
    for(var cardNum = 1; cardNum < 14; cardNum++){
        for(var i = 0; i < 4; i++){
            var suit = i;
            switch(i){
                case 0:
                    suit = "\u2665";
                    break;
                case 1:
                    suit = "\u2660";
                    break;
                case 2:
                    suit = "\u2663";
                    break;
                case 3:
                    suit = "\u2666";
                    break;
            }
            cards.push({suit : suit, value : cardNum});
        }
    }
    layout();
}

function layout(){
    var docFrag = document.createDocumentFragment();
    
    for(var i = 0; i < cards.length; i++){
        var card = document.createElement("div");
        card.className += " card";
        card.setAttribute("data-number", cards[i].value);
        
        card.setAttribute("data-suit", cards[i].suit);
        docFrag.appendChild(card);
        document.body.appendChild(docFrag);
        card.style.left = 60+ i*4 +"px";
        card.style.top = 60+ i*4 +"px";
        card.style.webkitAnimationDuration = i + "s"; 
    }
}

initDeck();