How to trigger a 3D transformation onclick

Question

When the question (.question) is hovered on, it 3D transitions 180 degrees around (transform: (180deg)). However, I want this to happen onclick, not on hover. How would I achieve this using 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>

Answer 1

In vanilla js, you could use querySelector and element classList's 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>

---

Reference

Document.querySelector()

Element.classList