单击CSS翻转动画

Question

我跟随example 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

在onclick上使用.flip-container事件处理程序，而不是ontouchstart。当然不要忘记从你的风格（即:hover）中删除css .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。