Javascript 在单击而不是悬停时实现flipcard

我已经实现了一个css flipcard效果，它使用css在悬停上工作。请参阅下面的css代码。但是，我想通过使用jQuery在单击时实现flipcard效果。我什么都试过了，但还是想不出来

下面是我认为可以工作的javascript

$('.flip-container .flipper').click(function(){
    $(this).css('transform, rotateY(180deg)');
});

请参阅下面的代码与悬停

html

<div class="flip-container">
  <div class="flipper">
    <div class="front artist-1">
      <!-- front content -->
    </div>
    <div class="back">
      <p>You won</p>
    </div>
  </div>
</div>

---

要实现这一点，您需要删除CSS中

.flip container

元素上的

：hover

规则：

/* .flip-container:hover .flipper, */
.flip-container.hover .flipper {
    transform: rotateY(180deg);
}

然后，在JS中，当单击元素时，您需要切换

hover

类：

$('.flip-container .flipper').click(function() {
    $(this).closest('.flip-container').toggleClass('hover');
    $(this).css('transform, rotateY(180deg)');
});

---

请注意，现在将类名从

hover

更改也是值得的，否则，在以后维护代码时可能会产生混淆

您需要做的是将css从在

：hover

伪元素上触发更改为需要通过jquery切换的类

css

JS

这是一张工作票

$('.flip-container .flipper').click(function() {
    $(this).closest('.flip-container').toggleClass('hover');
    $(this).css('transform, rotateY(180deg)');
});

/* flip the pane when clicked */
 .flip-container .flipper.flip {
  transform: rotateY(180deg);
}

$('.flip-container .flipper').click(function(){
    $(this).toggleClass("flip");
});