如何在单击时触发三维变换

Question

当问题(.question(悬停在上面时，它将围绕180度进行3D转换(transform:(180deg((。然而，我希望这发生在点击，而不是悬停。如何使用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

在vanilla 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