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/