CSS 3D Card flipping 180x180

(mousehover)

by NunoMira

HTML

<div class='card'>
    <div class='front face'>
        <img src='http://placehold.it/180x180'/>
    </div>
    <div class="back face">
        <p>This is back</p>
    </div>
</div>
<div class='card'>
    <div class='front face'>
        <img src='http://placehold.it/180x180'/>
    </div>
    <div class="back face">
        <p>This is back</p>
    </div>
</div>
<div class='card'>
    <div class='front face'>
        <img src='http://placehold.it/180x180'/>
    </div>
    <div class="back face">
        <p>This is back</p>
    </div>
</div>

CSS

.card {
    width: 180px;
    height: 180px;
    position: relative;
    -webkit-perspective: 700;
    
    float: left;
    margin: 10px;
}
.card:hover .front{
    -webkit-transform: rotateY(-180deg);  
}
.card:hover .back {
    -webkit-transform: rotateY(0deg);  
}
.card:hover .face {
    -webkit-transition: all 0.3s ease-out;
}
.face {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; 
    -webkit-transition: all 0.8s ease-out;
}
.front {
    -webkit-transform: rotateY(0deg);
}
.back {
    background: #9dcc78;
    -webkit-transform: rotateY(180deg);
}