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

Megazupik 22.04.2017 19:15

поворот блоков
 
Вложений: 1
Привет всем

Помогите пожалуйста с заданием, есть 16 блоков, их надо заставить поворачиваться как карта в этом примере:
http://www.xiper.net/examples/html-a...lip-click.html
надо сделать так что бы по нажатию кнопки запускалась анимация переворота на блоках по очереди,желательно осуществить это с помощью таймера, блок должен поворачиваться за 2 секунды, но каждый следующий блок должен начать свою анимацию через 1.5 секунды после того как начал свою анимацию блок перед ним

Nexus 22.04.2017 19:22

Megazupik, вы бы хоть выложили то, что уже написали...

рони 22.04.2017 20:08

Megazupik,
http://codepen.io/zavoloklom/details/eNaEBM

Megazupik 22.04.2017 20:15

считайте просто 16 дивов в контейнере и всё

Megazupik 22.04.2017 20:37

Цитата:

Сообщение от рони (Сообщение 450740)

Красиво, но я не знаю как извлечь пользу из этого для себя

рони 22.04.2017 20:38

Цитата:

Сообщение от Megazupik
блок должен поворачиваться за 2 секунды, но каждый следующий блок должен начать свою анимацию через 1.5 секунды после того как начал свою анимацию блок перед ним

:blink:
http://javascript.ru/forum/showthrea...506#post438521

Megazupik 22.04.2017 20:43

Цитата:

Сообщение от рони (Сообщение 450749)

ситуация возможно похожая, но жаваскрипт я вижу второй день, и модифицировать под себя не могу

рони 22.04.2017 20:50

Megazupik,
попробуйте сначала сделать одновременный поворот всех блоков.можно через смену класса родителя всех блоков.

DivMan 22.04.2017 21:01

<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>

рони 22.04.2017 21:09

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() {
        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">
  <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, время: 23:01.