Edit in JSFiddle

Troy's backface-visibility demo:<br>
Click the card to flip it over<br><br>
<div class="container" onclick="flip(this)">
<div class="card back" style="-webkit-transform: rotateY(180deg); transform: rotateY(180deg);"></div>
<div class="card front ace" style="-webkit-transform: rotateY(0deg); transform: rotateY(360deg);"></div>
</div>

<div class="container" onclick="flip(this)">
<div class="card back" style="-webkit-transform: rotateY(180deg); transform: rotateY(180deg);"></div>
<div class="card front queen" style="-webkit-transform: rotateY(0deg); transform: rotateY(360deg);"></div>
</div>

<div class="container" onclick="flip(this)">
<div class="card back" style="-webkit-transform: rotateY(180deg); transform: rotateY(180deg);"></div>
<div class="card front joker" style="-webkit-transform: rotateY(0deg); transform: rotateY(360deg);"></div>
</div>

.card
{
    width: 140px;
    height: 198px;  
    border: 1px solid black;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 1s;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 140px 198px;
    transition: all 1s;
}

.back{
    background-image: url(http://www.ibike.org/images/history/bicycleplayingcard01.jpg);
}

.ace{
    background-image: url(http://playingcardcollector.files.wordpress.com/2013/06/bicycle_royal_wilderness_playing_cards_ace_of_spades.png);
}

.queen{
background-image: url(http://cdn.instructables.com/F7V/BFDK/GOMNSTVP/F7VBFDKGOMNSTVP.LARGE.jpg);    
}

.joker{
    background-image: url(http://www.scenethelight.com/constantcontact/joker-playing_card.jpg);
}

.container{
    position: relative;
    display: inline-block;
    width: 140px;
    height: 198px;
    margin: 10px;
    perspective: 500px;
    -webkit-perspective: 500px;
}

function flip(container) {
    back = container.getElementsByClassName("back")[0];
    front = container.getElementsByClassName("front")[0];
    if(back.style.webkitTransform == "rotateY(180deg)" || back.style.transform == "rotateY(180deg)")
       {
       back.style.webkitTransform = "rotateY(0deg)";
       front.style.webkitTransform = "rotateY(180deg)"; 
       back.style.transform = "rotateY(0deg)";
       front.style.transform = "rotateY(180deg)"; 
        }
    else
       {
       back.style.webkitTransform = "rotateY(180deg)";
       front.style.webkitTransform = "rotateY(360deg)"; 
       back.style.transform = "rotateY(180deg)";
       front.style.transform = "rotateY(360deg)";
       }
}