激活CSS翻轉轉換

Question

我一直在關注如何製作一個3d翻轉動畫的Adam Khoury的教程，該工具可以與懸停僞類一起工作，但我正努力通過Java腳本激活轉換。我的目標是點擊該框來激活轉換。

https://www.youtube.com/watch?v=W3eJWpvIl0g

Html: 

           <div class="flip3D" > 
       <div class="back">Box 1 - Back</div> 
       <div class="front" >Box 1 - Front</div> 
       </div> 

       <div class="flip3D"> 
       <div class="back">Box 2 - Back</div> 
       <div class="front">Box 2 - Front</div> 
       </div> 

       <div class="flip3D"> 
       <div class="back">Box 3 - Back</div> 
       <div class="front">Box 3 - Front</div> 



CSS: 

.flip3D{ width:240px; height:200px; margin:10px; float:left; } 

.flip3D > .front{ position:absolute; -webkit-transform: perspective(600px) rotateY(0deg); 
transform: perspective(600px) rotateY(0deg); 
background:#FC0; width:240px; height:200px; border-radius: 7px; 
-webkit-backface-visibility: hidden; backface-visibility: hidden; 
transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s; 
} 

.flip3D > .back{ position:absolute; -webkit-transform: perspective(600px) rotateY(180deg); 
transform: perspective(600px) rotateY(180deg); 
background: #80BFFF; width:240px; height:200px; border-radius: 7px; -webkit-backface-visibility: hidden; backface-visibility: hidden; 
transition: -webkit-transform .5s linear 0s; 
transition: transform .5s linear 0s; 
} 

.flip3D:active> .front{ 
-webkit-transform: perspective(600px) rotateY(-180deg); 
transform: perspective(600px) rotateY(-180deg); 
} 
.flip3D:active > .back{ 
-webkit-transform: perspective(600px) rotateY(0deg); 
transform: perspective(600px) rotateY(0deg); } 

謝謝！

Answer 1

你可以使用jQuery。一旦你點擊框，觸發懸停事件。

試試這個

$('.box').click(function() { 
    $('.animationElement').trigger('hover'); 
} 

這將激活該元素的懸停事件。更多的CSS會採取行動，並會觸發動畫。

或者，您可以使用className來將該類名附加到該元素。

$('.box').click(function() { 
    $('.animationElement').attr('class', 'flip3D'); 
} 

然後CSS會完成這項工作。