Edit in JSFiddle

figure.card {
    width: 100px;
    height: 130px;
    position: relative;
    -webkit-perspective: 600;
}

figure.card img {
    -webkit-border-radius: 6px;
}

figure.card img.front {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: inherit;
    height: inherit;
    
    -webkit-box-shadow: 0 1px 5px #CCC;
    
    -webkit-transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    
    -webkit-transition: all 0.4s ease-in-out;
}

figure.card:hover img.front {
    z-index: 4;
    
    -webkit-transform: rotateY(180deg);
    -webkit-box-shadow: 0 15px 40px #EEE;
    top -9px;
}

figure.card img.back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: inherit;
    height: inherit;
    
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    
    -webkit-transition: all 0.4s ease-in-out;
}

figure.card:hover img.back {
    z-index: 5;
    
    top: -9px;
    -webkit-transform: rotateY(0deg);
    -webkit-box-shadow: 0 15px 50px rgba(0,0,0,0.2);
}

<figure class="card">
    <img class="front" 
    src="http://4.bp.blogspot.com/-hxkyWgSAM-o/TWcXMLkJCyI/AAAAAAAAABU/tK4-qsnB7fA/s1600/back.png" />
    <img class="back"
    src="http://3.bp.blogspot.com/-Dozqrh0Fkkk/TXC2qqQy39I/AAAAAAAADnU/nESieUfOU9Y/s1600/ace_of_spades.png"
    width="100" height="130"/>
</figure>

Kartın üzerine tıklayın.