如何随机翻转 div

Question

>我创建了一个应用程序，其中所有div在悬停时都是垂直翻转的。我想让它在没有悬停的情况下随机。我应该怎么做？

.vertical.flip-container {
  position: relative;
  float: left;
  margin-left: 50px;
}
.vertical .back {
  transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
  transform-origin: 100% 50px;
}
.vertical.flip-container:hover .flipper {
  transform: rotateX(-180deg);
}
.flip-container {
  perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper,
.flip-container.hover .flipper {
  transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
  width: 100px;
  height: 100px;
}
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front" style="background: red">
      Rushikesh
    </div>
    <div class="back" style="background:green">
      Jogle
    </div>
  </div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front" style="background: red">
      Rushikesh
    </div>
    <div class="back" style="background:green">
      Jogle
    </div>
  </div>
</div>
<div class="flip-container vertical" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front" style="background: red">
      Rushikesh
    </div>
    <div class="back" style="background:green">
      Jogle
    </div>
  </div>
</div>

任何建议将不胜感激。

Answer 1

我简化了你的标记和CSS。也给了它更多的3D外观。您可以使用 setInterval 将它们悬停在翻转：

http://jsfiddle.net/7x75466y/5/

var $flippers = $(".flip-container"),
    qtFlippers = $flippers.length;
setInterval(function () {
    $flippers.eq(Math.floor(Math.random()*qtFlippers)).toggleClass('hover');
}, 1000);

Answer 2

这是一个 JSfiddle，它选择一个随机磁贴，并在每秒对其应用一个操作（使用 setTimeout）。您可以在磁贴上执行您喜欢的任何操作。使用 jQuery

http://jsfiddle.net/7x75466y/2/

var containers = $(".flip-container")
setInterval(function() {
    var target = containers.eq(Math.floor(Math.random() * containers.size()))
    target.fadeToggle() //DO WHAT YOU WANT TO THE TARGET
}, 1000)