flip

animation

by leftstick

HTML

<div class="container">
    <div class="card">
        <img class="back" src="http://leftstick.github.io/vue-memory-game/c59e1bcb7ac7cf5fb2221392749df061.png"/>
        <img class="front" src="http://leftstick.github.io/vue-memory-game/6dba3655e10a58f2e52f702871c41250.png"/>
    </div>
</div>

CSS

.container{
    width: 100px;
    height: 121px;
    cursor: pointer;
    position: relative;
    perspective: 800px;
}

.card {
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
}

.card.flipped {
    transform: rotateY( 180deg );
}

.card img {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    backface-visibility: hidden;
}

.card .back {
    background: blue;
    transform: rotateY( 0deg );
}

.card .front {
    background: blue;
    transform: rotateY( 180deg );
}

JavaScript

var card = document.querySelector('.card');

document
    .querySelector('.container')
    .addEventListener('click', function(){
        if(card.classList.contains('flipped')){
            return card.classList.remove('flipped');
        }
        card.classList.add('flipped');
    }, false);