使用onClick事件觸發CSS3轉換

我正在嘗試使用css3轉換，並希望引入onClick事件來觸發轉換，而不是僞懸停類。我遇到的問題是過渡分爲兩個元素。使用onClick事件觸發CSS3轉換

下面是HTML：

<div class="box"><img src="images/1.jpg" width="300" height="200" alt=""/> 
<div class="mask"> 
<!-- Further content goes here --> 
</div> 
</div>

這裏是CSS：

.box { 
    width: 300px; 
    height: 200px; 
    position: relative; 
    overflow: hidden; 
    border: solid 2px #E6171A;    
} 

.mask { 
    width: 300px; 
    height: 200px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: #021288; 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
     filter: alpha(opacity=0); 
     opacity: 0; 
     -webkit-transform: scale(0) rotate(-360deg); 
     -moz-transform: scale(0) rotate(-360deg); 
     -o-transform: scale(0) rotate(-360deg); 
     -ms-transform: scale(0) rotate(-360deg); 
     transform: scale(0) rotate(-360deg); 
     -webkit-transition: all 0.4s ease-in; 
     -moz-transition: all 0.4s ease-in; 
     -o-transition: all 0.4s ease-in; 
     -ms-transition: all 0.4s ease-in; 
     transition: all 0.4s ease-in; 
} 

.box:hover .mask { 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=40)"; 
    filter: alpha(opacity=40); 
    opacity: .4; 
    -webkit-transform: scale(1) rotate(0deg); 
    -moz-transform: scale(1) rotate(0deg); 
    -o-transform: scale(1) rotate(0deg); 
    -ms-transform: scale(1) rotate(0deg); 
    transform: scale(1) rotate(0deg); 
    -webkit-transition-delay: .4s; 
    -moz-transition-delay: .4s; 
    -o-transition-delay: .4s; 
    -ms-transition-delay: .4s; 
    transition-delay: .4s; 
} 

.box img { 
    -webkit-transition: all 0.4s ease-in-out 1.3s; 
    -moz-transition: all 0.4s ease-in-out 1.3s; 
    -o-transition: all 0.4s ease-in-out 1.3s; 
    -ms-transition: all 0.4s ease-in-out 1.3s; 
    transition: all 0.4s ease-in-out 1.3s; 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
} 

.box:hover img { 
    -webkit-transform: translateX(300px); 
    -moz-transform: translateX(300px); 
    -o-transform: translateX(300px); 
    -ms-transform: translateX(300px); 
    transform: translateX(300px); 
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    -webkit-transition-delay: .8s; 
    -moz-transition-delay: .8s; 
    -o-transition-delay: .8s; 
    -ms-transition-delay: .8s; 
    transition-delay: .8s; 
/* the delay goes in the hover(action state) to overide the delay in the original state  */ 
}

所以，問題是如何申請的onClick事件到分佈在兩個元素的過渡？希望有人能幫助！

來源

2014-06-24 Steve Joiner