如何随机翻转Div

Question

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

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

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

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

任何建议都会感激不尽.

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

感谢adavcne

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