Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   поворот блоков (https://javascript.ru/forum/events/68537-povorot-blokov.html)

рони 25.04.2017 11:33

Megazupik,
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>CSS3 flip</title>

<!-- ===== style sheets ===== -->
<style>
* { margin: 0; padding: 0; }

.container {
  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 { /* поворачивать будем общий контейнер */

  width: 190px;
  height: 266px;


  -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 пространстве */
}
.container.flip   .card {	/* добавляя этот класс, поворачивеам контейнер на 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 градусов */
}
</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 * 1.5;
        child.style.webkitTransitionDelay = delay + "s";
        child.style.transitionDelay = delay + "s";
        var duration = "2s"  //лучше в css перенести из скрипта
        child.style.webkitTransitionDuration = duration ;
        child.style.transitionDuration = duration ;
        });
   button.addEventListener("click", function() {
        button.value = "в процессе";
        textarea.value += "\nНачало процесса";
        element.classList.toggle("flip")
    }, false);
    var n = 0;
    function showMessage() {
        textarea.value += "\nКонец процесса " + (n+1);
        n = ++n %  card.length;
        if(!n) button.value = "пуск"
    }

    element.addEventListener("transitionend", showMessage, false)
}, false);
</script>
</head>

<body>

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

<input type="button" value="пуск" id="button" /><br>
<textarea name="" rows="30"  ></textarea>

</body>
</html>


Часовой пояс GMT +3, время: 12:10.