时间戳

首页 > 解决方案 > 如何对具有相同功能的多个元素执行转换

javascript - 如何对具有相同功能的多个元素执行转换

问题描述

我有 2 个元素，每次单击我的按钮时都应该旋转 Y(180deg)，但是我现在拥有的代码只旋转第一个。如何实现所有元素的转换？（香草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')
            }

标签： javascriptcss3drotationtransformation

解决方案

我希望这可以帮助你。查看这篇文章了解更多信息

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>

推荐阅读