[英]How to Execute a Transformation for Multiple elements with the Same Function
I have 2 elements which should both rotateY(180deg) every time my button is clicked, however the code I have now only rotates the first one.我有 2 个元素,每次单击我的按钮时都应该旋转 Y(180 度),但是我现在的代码只旋转第一个。 How do I achieve a transfomation for all my elements?
如何实现所有元素的转换? (Vanilla JS)
(香草JS)
.question {
width:100%;
height:100%;
transition:transform 0.5s;
transform-style:preserve-3d;
}
.sceneQ {
width:600px;
height:150px;
}
.questionTransform {
transform:rotateY(190deg)
}
.face {
text-align:center;
backface-visibility:hidden;
}
.back {
transform: rotateY(180deg);
}
<button id="hintbtn" onclick="doTransform()">Do Transform</button>
<div id="sceneQ1" class="sceneQ">
<div class="question" id="Q1">
<div class="face front">
<p>Where does skateboarding originate from?</p>
</div>
<div class="face back">
<p>Someplace in America...</p>
</div>
</div> </div>
<div id="sceneQ2" class="sceneQ">
<div class="question" id="Q2">
<div class="face front">
<p>In what decade were the first kind of skateboards created?</p>
</div>
<div class="face back">
<p>After the 2nd World War...</p>
</div>
</div> </div>
function doTransform() {
const element = document.querySelector('.sceneQ .question')
element.classList.toggle('questionTransform')
}
I hope this can help you.我希望这可以帮助你。 Check this article for more info
查看这篇文章了解更多信息
function doTransform() { var elements = document.querySelectorAll('.sceneQ .question'); [].forEach.call(elements, function(element) { element.classList.toggle('questionTransform') }); }
.question { width:100%; height:100%; transition:transform 0.5s; transform-style:preserve-3d; } .sceneQ { width:600px; height:150px; } .questionTransform { transform:rotateY(190deg) } .face { text-align:center; backface-visibility:hidden; } .back { transform: rotateY(180deg); }
<button id="hintbtn" onclick="doTransform()">Do Transform</button> <div id="sceneQ1" class="sceneQ"> <div class="question" id="Q1"> <div class="face front"> <p>Where does skateboarding originate from?</p> </div> <div class="face back"> <p>Someplace in America...</p> </div> </div> </div> <div id="sceneQ2" class="sceneQ"> <div class="question" id="Q2"> <div class="face front"> <p>In what decade were the first kind of skateboards created?</p> </div> <div class="face back"> <p>After the 2nd World War...</p> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.