Question

单击按钮时，如何同时翻转多个div？当它只有一个div时效果很好。但是如何让多个物体同时翻转呢？我尝试将#flip-toggle更改为类.flip-toggle，但它不起作用...

提前致谢。

这是我的代码：
CSS：

        .flip-container {
            -webkit-perspective: 1000;
            -moz-perspective: 1000;
            perspective: 1000;
            border: 1px solid #ccc;
        }

        .flip-container:hover .flipper, .flip-container.hover .flipper, .flip-toggle.flip .flipper {
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            transform: rotateY(180deg);
        }

        .flip-container, .front, .back {
            width: 160px;
            height: 160px;
        }

        .flipper {
            -webkit-transition: 0.6s;
            -webkit-transform-style: preserve-3d;
            -moz-transition: 0.6s;
            -moz-transform-style: preserve-3d;
            transition: 0.6s;
            transform-style: preserve-3d;
            position: relative;
        }

        .front, .back {
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
        }

        .front {
            background: lightgreen;
            z-index: 2;
        }

        .back {
            background: lightblue;
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            transform: rotateY(180deg);
        }

    </style>

Html:
<body>
   <div class="flip-container flip-toggle">
    <div class="flipper">
       <div class="front">
        <img src="image01.jpg">
       </div>
       <div class="back">               
       </div>
    </div>
    </div>

    <div class="flip-container flip-toggle">
    <div class="flipper">
       <div class="front">
        <img src="image02.jpg">
       </div>
       <div class="back">   

       </div>
    </div>
    </div>

   <button onclick="document.querySelector('.flip-toggle').classList.toggle('flip');" >Toggle Flip</button>
</body>

Answer 1

如果您愿意使用jQuery，我建议您查看QuickFlip 2

如果没有，我会在这里找到一个简单的答案。

将两个div包装成一个div，并在按钮单击时翻转一个div。

以下是working example。

您仍然需要进行一些更改，因为一旦您翻转父div，子div不再翻转，直到您再次翻转父级，但这可以很容易地修复。

<div class="flip-toggle">
    <div class="flip-container">
        <div class="flipper">
            <div class="front">
                <img src="image01.jpg">
            </div>
            <div class="back"></div>
        </div>
    </div>
    <div class="flip-container">
        <div class="flipper">
            <div class="front">
                <img src="image02.jpg">
            </div>
            <div class="back"></div>
        </div>
    </div>
</div>
<button onclick="document.querySelector('.flip-toggle').classList.toggle('flip');">Toggle Flip</button>

如何同时翻转多个div？

1 个答案: