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

Как я могу перевернуть несколько div одновременно, когда я нажимаю кнопку? Он работает хорошо, когда у него есть только один div. Но как я могу сделать несколько объектов в одно и то же время? Я пытаюсь изменить # flip-toggle на класс .flip-toggle, но он не работает ...Как я могу перевернуть несколько div одновременно?

Заранее спасибо.

Вот мой код:
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>

источник

2013-07-24 user2616493

В соответствии с этим https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector querySelector возвращает только первый соответствующий элемент. Не может быть JQuery? Существует также querySelectorAll, но вам придется перебирать возвращаемые элементы. –

Если вы готовы на использовании JQuery, то я хотел бы предложить вам взглянуть на QuickFlip 2

Если не я получил простой ответ здесь для вас.

Оберните оба divs в родительский и сделайте родительский щелчок на кнопке.

Адрес working example для вас.

Вам все равно необходимо внести некоторые изменения, как только вы переверните родительский div, дочерние divs не перевернутся, пока вы снова не переверните родителя, но это можно легко устранить.

<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-24 23:54:52 Thanos

Спасибо большое! Он отлично работает! – user2616493

Приветствия, рад, что я мог бы помочь :) Если бы это был ответ, который вы искали, я могу попросить вас отметить мой ответ в качестве принятого ответа? благодаря – Thanos

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

ответ

Смежные вопросы