Javascript 如何随机翻转Div

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

.垂直翻转容器{ 位置：相对位置； 浮动：左； 左边距：50像素； } .垂直，向后{ 变换：旋转180度； } .vertical.flip-container.flipper{ 变换原点：100%50px； } .垂直.翻转容器：悬停.翻转器{ 变换：rotateX-180度； } .翻转容器{ 前景：1 000； } /*悬停时翻转窗格*/ .flip容器：悬停.flipper， .flip-container.hover.flipper{ 变换：旋转180度； } .翻转容器， 正面 .回来{ 宽度：100px； 高度：100px； } .鳍状肢{ 过渡：0.6s； 变换样式：保留-3d； 位置：相对位置； } 正面 .回来{ 背面可见性：隐藏； 位置：绝对位置； 排名：0； 左：0； } 鲁希凯什 慢跑 鲁希凯什 慢跑 鲁希凯什 慢跑

---

下面是一个JSFIDLE，它选择一个随机平铺，并使用setTimeout每秒对其应用一个操作。您可以在瓷砖上执行任何您喜欢的操作。使用jQuery

---

下面是一个JSFIDLE，它选择一个随机平铺，并使用setTimeout每秒对其应用一个操作。您可以在瓷砖上执行任何您喜欢的操作。使用jQuery

---

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

---

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

---

您想不想随机翻转它们全部或只是其中的一部分？您想不想随机翻转它们全部或只是其中的一部分？@Rushikeshjogle我用支持水平翻转的新版本更新了JSFIDLE链接请参见第一块。@Rushikeshjogle该链接仅适用于webkit浏览器。对于IE9，您应该在所有CSS转换中添加-ms-prefix。对于mozilla-moz-。看见顺便说一句，你真的需要在IE上翻页吗？对对于Ie9及以上版本，或者您知道我可以在哪里制作这样的应用程序的Jquery库吗？您可以从caniuse网站上看到，Ie9不支持3D转换，只支持带有-ms-前缀的2D。只需在悬停时显示back div，无需动画。有动画有什么大不了的？记住，内容仍然比表达更重要。IE9用户将错过该动画，甚至不会意识到这一点。转到以获取特定于IE9的CSS。这样，动画就可以在真实浏览器中使用。@Rushikeshjogle我用支持水平翻转的新版本更新了JSFIDLE链接。请参见第一块。@Rushikeshjogle该链接仅适用于webkit浏览器。对于IE9，您应该在所有CSS转换中添加-ms-prefix。对于mozilla-moz-。看见顺便说一句，你真的需要在IE上翻页吗？对对于Ie9及以上版本，或者您知道我可以在哪里制作这样的应用程序的Jquery库吗？您可以从caniuse网站上看到，Ie9不支持3D转换，只支持带有-ms-前缀的2D。只需在悬停时显示back div，无需动画。有动画有什么大不了的？记住，内容仍然比表达更重要。IE9用户将错过该动画，甚至不会意识到这一点。转到以获取特定于IE9的CSS。这样，动画就可以在真正的浏览器中使用。

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)

var $flippers = $(".flip-container"),
    qtFlippers = $flippers.length;

setInterval(function () {
    $flippers.eq(Math.floor(Math.random()*qtFlippers)).toggleClass('hover');
}, 1000);