将webkit转换从CSS转换为JavaScript

对于以下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>

但我想更改它，使翻转在单击时发生，我附加了一个单击侦听器，正在尝试下面的代码，但它没有做任何事情

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)"

JavaScript应该如何实现与CSS相同的功能？

使用类：

#card-container.flipped.back{
-webkit变换：rotateX（0度）；
}
#card-container.flipped.front{
-webkit变换：rotateX（-180度）；
}

函数单击（evt，listElementId）{
document.getElementById（listelmentId）.classList.add（'flipped'）；
}

您混淆了

转换

s和

转换

s。根据，你应该使用

front.style.webkitTransform = "rotateX(-180deg)";

---

当我尝试时仍然没有发生任何事情。@minitech:您可以使用

.toggle（）

：-）@aminoacys:您是如何连接侦听器的？给我们看看代码。另外，您是否支持

类列表

？