单击CSS翻转动画

Question

我按照David Walsh提供的示例制作翻转动画。 它全部都在悬停上工作，但是，我想在单击而不是悬停时翻转元素。

以下代码可以正常工作并在悬停时翻转元素，但是，我想使用javascript / jquery来实现这一点。 我尝试了许多不同的方法，但无法弄清楚该如何做。

 .flip-container { perspective: 1000px; } .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { width: 320px; height: 480px; } .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } .front { z-index: 2; transform: rotateY(0deg); } .back { transform: rotateY(180deg); } 

 <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> 1 </div> <div class="back"> 2 </div> </div> </div> 

Answer 1

https://jsfiddle.net/pf4aemn7/ HTML

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      1
    </div>
    <div class="back">
      2
    </div>
  </div>
</div>

的CSS

.flip-container {
  perspective: 1000px;
}

.flip-container.hover .flipper {
  transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
  width: 320px;
  height: 480px;
}
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.front,
.back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.front {
  z-index: 2;
  transform: rotateY(0deg);
}
.back {
  transform: rotateY(180deg);
}

JS

$(document).on("click", ".flip-container", function () {
    $(this).toggleClass('hover');
});

Answer 2

在.flip-container上使用onclick事件处理程序，而不是ontouchstart 。 当然，不要忘记从样式中删除css :hover选择器（即.flip-container:hover .flipper ）。

 .flip-container { perspective: 1000px; } .flip-container.hover .flipper { transform: rotateY(180deg); } .flip-container, .front, .back { width: 320px; height: 480px; } .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } .front { z-index: 2; transform: rotateY(0deg); } .back { transform: rotateY(180deg); } 

 <div class="flip-container" onclick="this.classList.toggle('hover');"> <div class="flipper"> <div class="front"> 1 </div> <div class="back"> 2 </div> </div> </div> 

另外，我认为您应该将.hover类重命名为更合适的名称，例如.clicked 。