-2

次の HTML の場合:

<li id="li1">
    <div id="card-container">
        <div id="card">
            <div class="front">
            <img id="track_image" src="image.jpg" />
        </div>
        <div class="back">
            <div id="controls">
                <audio controls></audio>
            </div>
        </div>  
    </div>
</li>

ホバーすると反転する次のCSSがあります。

#card-container:hover .back {   
    -webkit-transform: rotateX(0deg);
}

#card-container:hover .front {      
    -webkit-transform: rotateX(-180deg);
}

しかし、代わりにクリックでフリップが発生するように変更したいので、クリックリスナーをアタッチし、以下のコードを試していますが、何もしません

function click(evt, listElementId) {
       var listElement = document.getElementById(listElementId);
       var front = listElement.getElementsByClassName("front")[0];
       front.style.webkitTransition = "rotateX(-180deg)";
       var back = listElement.getElementsByClassName("back")[0];
       back.style.webkitTransition = "rotateX(0deg)"

CSS が行っているのと同じことを達成するには、JavaScript はどうあるべきですか?

4

2 に答える 2

2

transitionあなたはs とtransformationsを混同しています。この回答によると、使用する必要があります

front.style.webkitTransform = "rotateX(-180deg)";
于 2012-09-09T18:16:13.737 に答える
0

クラスを使用します。

#card-container.flipped .back {   
    -webkit-transform: rotateX(0deg);
}

#card-container.flipped .front {      
    -webkit-transform: rotateX(-180deg);
}

function click(evt, listElementId) {
    document.getElementById(listElementId).classList.add('flipped');
}
于 2012-09-09T18:06:16.757 に答える