<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>CSS3 flip</title>
<!-- ===== style sheets ===== -->
<style>
* { margin: 0; padding: 0; }
.container {
width: 200px;
margin: 100px auto auto 100px;
position: relative;
display : flex;
flex-wrap: wrap;
/* задаем глубину сцене */
-webkit-perspective: 600px; /* webkit */
-moz-perspective: 600px; /* mozilla */
-ms-perspective: 600px; /* IE 10 */
-o-perspective: 600px; /* opera когда-то тоже должна начать понимать */
perspective: 600px; /* св-во по стандатам */
}
.card { /* поворачивать будем общий контейнер */
line-height: 50px;
text-align: center;
width: 50px;
height: 50px;
border: 2px solid blue;
box-sizing: border-box;
}
.container.flip .card { /* добавляя этот класс, поворачивеам контейнер на 180 градусов */
-webkit-transform: rotateX( 180deg );
-moz-transform: rotateX( 180deg );
-ms-transform: rotateX( 180deg );
-o-transform: rotateX( 180deg );
transform: rotateX( 180deg );
}
textarea, input{
width: 100%;
resize: none;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var button = document.getElementById("button"),
textarea = document.getElementsByTagName("textarea")[0],
element = document.querySelector(".container"),
card = document.querySelectorAll(".card");
[].forEach.call( card, function(child, i) {
var delay = i * 0.5;
child.style.webkitTransitionDelay = delay + "s";
child.style.transitionDelay = delay + "s";
child.style.webkitTransitionDuration = "2s" ;
child.style.transitionDuration = "2s" ;
});
// начать повторы с интервалом 0.5 сек
button.addEventListener("click", function() {
textarea.value += "\nНачало процесса";
element.classList.toggle("flip")
}, false);
function showMessage() {
textarea.value += "\nКонец процесса"
}
element.addEventListener("transitionend", showMessage, false)
}, false);
</script>
</head>
<body>
<div class="container" id="container">
<div class="card">
1
</div>
<div class="card">
2
</div>
<div class="card">
3
</div>
<div class="card">
4
</div>
<div class="card">
5
</div>
<div class="card">
6
</div>
<div class="card">
7
</div>
<div class="card">
8
</div>
<div class="card">
9
</div>
<div class="card">
10
</div>
<div class="card">
11
</div>
<div class="card">
12
</div>
<div class="card">
13
</div>
<div class="card">
14
</div>
<div class="card">
15
</div>
<div class="card">
16
</div>
<input type="button" value="пуск" id="button" /><br>
<textarea name="" rows="30" ></textarea>
</div>
</body>
</html>
Вот получившийся у меня код, как его модифицировать так что бы было как у вас? то есть начало поворота карты отображалось в логе. В вашем коде я так и не понял как сделать так что бы вращение следующей карты наступало до конца вращения предыдущей