1

ボタンをクリックしたときに複数の div を同時に反転するにはどうすればよいですか? divが1つしかない場合にうまく機能します。しかし、どうすれば複数のオブジェクトを同時に反転させることができますか? #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 に答える