如何随机翻转Div

我创建了一个应用程序，其中所有div在hover时垂直翻转。 我想让它随意而不hover。 我该怎么做？

CSS

.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; } 

HTML

 
 
 
 Rushikesh 
 
 Jogle 
 
 
 
 
 
 Rushikesh 
 
 Jogle 
 
 
 
 
 
 Rushikesh 
 
 Jogle 
 
  

这是我的工作： – http://jsfiddle.net/rushijogle/7x75466y/

任何建议都会感激不尽。

如果你不同意，请不要将其标记为否定

感谢adavcne

Answer 1

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

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，它选择一个随机的tile，并每秒对它应用一个动作（使用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)