[DivMan]

<style>
*{margin: 0; adding: 0;}
.container {
    margin: 100px auto auto 100px;
    position: relative;
    width: 190px;
    height: 266px;
    /* задаем глубину сцене */
    perspective: 600px; /* св-во по стандартам */

}


#card { /* поворачивать будем общий контейнер */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: transform 0.5s; /* трансформации будут происходить анимированно продолжительностью 0.5 сек */
    transform-style: preserve-3d;   /* указываем, что дочерние элементы находятся в 3D пространстве */

}

#card.flip {    /* добавляя этот класс, поворачиваем контейнер на 180 градусов */
    transform: rotateY( 180deg );
}

figure {
    width: 100%;
    height: 100%;
    position: absolute;
    display: block;
    backface-visibility: hidden;    /* если элемент "отвернулся" от пользователя, контент этого элемента не виден */
}

.back {
    background: green;
}

.front {
    background: blue;
    transform: rotateY( 180deg );   /* в начальном положении фэйс карты к нам развернут на 180 градусов */
}

</style>

<div class="container" id="container">
<div id="card" class="">
    <figure class="back"></figure>
    <figure class="front"></figure>
</div>
</div>

<input type="button" value="Start" id="button">

<script>
	var btn = document.getElementById("button");
	var smena = document.getElementById("card");
	btn.onclick = function(){
		smena.classList.toggle("flip");
	}
</script>