CSS翻转动画点击

CSS Flip animation on click

本文关键字：动画 翻转 CSS      更新时间：2023-09-26

我遵循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>

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

在.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。

相关文章：