다음과 같은 HTML 자바 스크립트

Question

에 CSS에서 웹킷 전환을 변환 :

<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

. this answer에 따르면 사용해야합니다.

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

Answer 2

사용하는 클래스 : 당신은 transition들과 transform ations을 혼동 한

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