3D一次翻转多张卡

Question

我试图利用本文文章中提供的3D卡动画翻转功能： http : //callmenick.com/post/css-transitions-transforms-animations-flipping-card

但我不知道如何在点击时一次翻转2张卡片。 例如，如果我单击第一张卡，我也想同时翻转第二张卡。

HTML：

<div class="card effect__click">
  <div class="card__front">
    <span class="card__text">front</span>
  </div>
  <div class="card__back">
    <span class="card__text">back</span>
  </div>
</div>

CSS：

.card {
  position: relative;
  float: left;
  padding-bottom: 25%;
  width: 25%;
  text-align: center;
}

.card__front,
.card__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card__front,
.card__back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.9s;
          transition: transform 0.9s;
}
.card__text{color:#fff;}
.card__front {
  background-color: #ff5078;
}

.card__back {
  background-color: #1e1e1e;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}
.card.effect__hover:hover .card__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect__hover:hover .card__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}
.card.effect__click.flipped .card__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect__click.flipped .card__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

JS：

(function() {
  var cards = document.querySelectorAll(".card.effect__click");
  for ( var i  = 0, len = cards.length; i < len; i++ ) {
    var card = cards[i];
    clickListener(card);
  }

  function clickListener(card) {
    card.addEventListener( "click", function() {
      var c = this.classList;
      c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped");
    });
  }
})();

Answer 1

使用:nth-child选择器或其他合适的选择器将querySelector[All]用于下一个元素，或使用nextElementSibling ：

 (function() { var cards = document.querySelectorAll(".card.effect__click"); for ( var i = 0, len = cards.length; i < len; i++ ) { var card = cards[i]; clickListener(card); } function flip(card){ if (!card) return; var c = card.classList; c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped"); } function clickListener(card) { card.addEventListener( "click", function() { flip(this); flip(this.nextElementSibling); }); } })(); 

 .card { position: relative; float: left; padding-bottom: 25%; width: 25%; text-align: center; } .card__front, .card__back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .card__front, .card__back { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.9s; transition: transform 0.9s; } .card__text{color:#fff;} .card__front { background-color: #ff5078; } .card__back { background-color: #1e1e1e; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .card.effect__hover:hover .card__front { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .card.effect__hover:hover .card__back { -webkit-transform: rotateY(0); transform: rotateY(0); } .card.effect__click.flipped .card__front { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } .card.effect__click.flipped .card__back { -webkit-transform: rotateY(0); transform: rotateY(0); } 

 <div class="card effect__click"> <div class="card__front"> <span class="card__text">front</span> </div> <div class="card__back"> <span class="card__text">back</span> </div> </div> <div class="card effect__click"> <div class="card__front"> <span class="card__text">front</span> </div> <div class="card__back"> <span class="card__text">back</span> </div> </div>