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中的Thankx

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)

如何随机翻转Div

2 个答案: