<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div id="card" class=" "> <figure class="back"></figure> <figure class="front"></figure> </div> </div> <br /><br /> <div> <button class="button">Повернуть</button> </div>

.container { margin: 100px auto auto 100px; position: relative; width: 190px; height: 266px; /* задаем глубину сцене */ -webkit-perspective: 400px; /* webkit */ -moz-perspective: 400px; /* mozilla */ -ms-perspective: 400px; /* IE 10 */ -o-perspective: 400px; /* opera когда-то тоже должна начать понимать */ perspective: 400px; /* св-во по стандатам */ } #card { /* поворачивать будем общий контейнер */ top: 0; left: 0; width: 100%; height: 100%; position: absolute; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; -ms-transition: -moz-transform 0.5s; -o-transition: -o-transform 0.5s; transition: transform 0.5s; /* трансформации будут происходить анимированно продолжительностью 0.5 сек */ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; /* указываем, что дочерние элементы находятся в 3D пространстве */ } #card.flip { /* добавляя этот класс, поворачивеам контейнер на 180 градусов */ -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -ms-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); } figure { width: 100%; height: 100%; position: absolute; display: block; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; /* если элемент отвернут лицом от пользователя, контент этого элемента не виден */ } .back { background: url(http://www.xiper.net/examples/html-and-css-tricks/effects/card-back.png); } .front { background: url(http://www.xiper.net/examples/html-and-css-tricks/effects/card-front.png); -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -ms-transform: rotateY(180deg); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); /* в начальном положении фэйс карты к нам развернут на 180 градусов */ }

var clickHandler = function() { document.getElementById('card').classList.toggle('flip') } var buttons = document.getElementsByClassName('button') Array.prototype.forEach.call(buttons, function(button) { button.addEventListener('click', clickHandler) })