Bootstrap Snippet card rotate using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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 );
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
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)
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"card rotate"
Bootstrap 3.3.0 Snippet by sioniks

Related: See More

Questions / Comments:

"card rotate" Bootstrap 3.3.0 Snippet by sioniks

Related: See More

Questions / Comments:

"card rotate"
Bootstrap 3.3.0 Snippet by sioniks