1

单击按钮时如何同时翻转多个div？当它只有一个 div 时效果很好。但是我怎样才能让多个对象同时翻转呢？我尝试将 #flip-toggle 更改为 class .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>
4

1 回答 1

0

如果你愿意使用 jQuery，那么我建议你看看QuickFlip 2

如果没有，我在这里为您提供了一个简单的答案。

将两个 div 包装到父级中，并在单击按钮时使父级翻转。

这是一个适合您的工作示例。

您仍然需要进行一些更改，因为一旦您翻转父 div，子 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>
于 2013-07-24T23:54:52.183 回答