CSS 3 : Card Flips : Answer

by richardneililagan

HTML

<div class="deck">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

CSS

.deck {
    width:490px; margin:10px auto; position:relative; 
    top:100px;
}

.card {
    width:70px;
    height:120px;
    float:left;
    background-color:#f60;    
    -moz-transform:perspective(200px) rotateY(60deg);
    -moz-transition:all 0.5s ease-in-out;
    -moz-box-shadow:-10px 0 5px rgba(0,0,0,.25);
}

.card:hover {
    -moz-transform:perspective(200px) rotateY(0deg);
    -moz-box-shadow:0 2px 2px rgba(0,0,0,.25);
}

.card:hover ~ .card {
    -moz-transform:perspective(200px) rotateY(-60deg);
    -moz-box-shadow:10px 0 5px rgba(0,0,0,.25);
}