如何触发3D转换onclick

问题描述

悬停问题（.question）时，它会3D围绕180度转换（转换：（180deg））。但是，我希望这种情况发生在click而不是悬停时。我将如何使用Javascript实现这一目标？

.sceneQ {
  width: 600px;
  height: 150px;
}

.sceneQ:hover .question {
  transform: rotateY(190deg);
}

.question {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.face {
  text-align: center;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}

<div id="sceneQ1" class="sceneQ">
  <div class="question">
    <div class="face front">
      <p>Where does skateboarding originate from?</p>
    </div>
    <div class="face back">
      <p>Someplace in America...</p>
    </div>
  </div>
</div>

解决方法

在普通js中，您可以使用querySelector和元素classList的toggle

function doTransform() {
  const element = document.querySelector('.sceneQ .question');
  element.classList.toggle('questionTransform')
}

.sceneQ {
  width: 600px;
  height: 150px;
}

.questionTransform {
  transform: rotateY(190deg);
}

.question {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.face {
  text-align: center;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}

<button onclick="doTransform()">Do transform</button>

<div id="sceneQ1" class="sceneQ">
  <div class="question">
    <div class="face front">
      <p>Where does skateboarding originate from?</p>
    </div>
    <div class="face back">
      <p>Someplace in America...</p>
    </div>
  </div>
</div>

---

参考

Document.querySelector()

Element.classList