Javascript CSS点击翻转动画

我按照提供的制作翻转动画。它的所有工作都在悬停，但是，我想在单击时翻转元素，而不是在悬停时翻转

下面的代码可以工作并在hover上翻转元素，但是，我想使用javascript/jquery来实现这一点。我尝试过许多不同的方法，但不知道如何做到这一点

.flip容器{
透视图：1000px；
}
.flip容器：悬停.flipper，
.flip-container.hover.flipper{
变换：旋转（180度）；
}
.翻转容器，
.前线，
.回来{
宽度：320px；
高度：480px；
}
.鳍状肢{
过渡：0.6s；
变换样式：保留-3d；
位置：相对位置；
}
.前线，
.回来{
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
}
.前线{
z指数：2；
变换：旋转（0度）；
}
.回来{
变换：旋转（180度）；
}

1.
2.

HTML

JS

使用

.flip container

上的事件处理程序，而不是。当然，不要忘记从样式中删除css

：hover

选择器（即

.flip container:hover.flipper

）

.flip容器{
透视图：1000px；
}
.flip-container.hover.flipper{
变换：旋转（180度）；
}
.翻转容器，
.前线，
.回来{
宽度：320px；
高度：480px；
}
.鳍状肢{
过渡：0.6s；
变换样式：保留-3d；
位置：相对位置；
}
.前线，
.回来{
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
}
.前线{
z指数：2；
变换：旋转（0度）；
}
.回来{
变换：旋转（180度）；
}

1.
2.

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

.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);
}

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