How can I flip multiple div at same time?


Tags: html,css,flip

Problem :

How can I flip multiple div at same time when I click the button? It works well when it only has one div. But how can I make multiple objects flip at same time? I try to change #flip-toggle to class .flip-toggle , but it doesn't work...

Thanks in advance.

Here is my code:
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>


Solution :

If you are willing on using jQuery then i would suggest you to have a look on the QuickFlip 2

If not i've got a simple answer here for you.

Wrap both divs into a parent one and make the parent one flip on the button click.

Here is a working example for you.

You will still need to make some changes as once you flip the parent div the child divs doesn't flip anymore until you flip the parent again, but this can be fixed easily.

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

    CSS Howto..

    Border positioning: how to?

    How to scale div using css animation in javascript

    How to use a background image in Webfolio WordPress theme without breaking CSS header?

    How to fit images into keeping the exact size of

    How do I align the list items in an
      with my

      ?

    How can I wrap text around a bottom-right div?

    How do I find out which style is overriding another style?

    How to get the header and navbar on top?

    showing a css component for a specified number of seconds

    How can I make one