CSS3 - 在懸停時浮動，點擊時激活（激活），但將圖像保持在同一位置？

Question

這裏是我的意思的例子：

JS小提琴：http://jsfiddle.net/MWAJC/

正如你所看到的，當你將鼠標懸停在圖像，圖像浮了上來，然後當你點擊它時，圖像會旋轉時回到其原始位置。我希望它能讓圖像在已經「浮動」的位置旋轉。我將如何去做這件事？

Answer 1

多個轉換可應用於元素，因此您可以將「浮動」轉換和旋轉轉換相結合。

img:active { 
    -moz-transform: translate(0,-1em) rotate(10deg); 
    -o-transform: translate(0,-1em) rotate(10deg); 
    -webkit-transform: translate(0,-1em) rotate(10deg); 
} 

http://jsfiddle.net/MWAJC/1/