從CSS轉換WebKit的過渡到JavaScript的

Question

對於以下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)" 

什麼JavaScript是否應該像CSS一樣實現？

Answer 1

你混淆了transition S和transform ations。根據this answer，您應該使用

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

Answer 2

使用類：

#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'); 
}