Как я могу перевернуть несколько div одновременно?

Question

Как я могу перевернуть несколько div одновременно?

Как я могу перевернуть несколько 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>

1

html css flip

Источник

user2616493 24 июл '13 в 22:46

1 ответ

Решение

Другие вопросы по тегам html css flip

user2045512 24 июл '13 в 23:54 2013-07-24 23:54 · Accepted Answer · 2013-07-24 23:54

Если вы хотите использовать 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>