CSS3 - 悬停时 float ，单击时旋转(事件)但将图像保持在同一位置？

Question

这是我的意思的一个例子:

JS fiddle :http://jsfiddle.net/MWAJC/

如您所见，当您将鼠标悬停在图片上时，图片会浮起来，然后当您点击它时，图片会旋转回到原来的位置。我希望它能使图像在已经“ float ”的位置旋转。我该怎么做？

Answer 1

多个变换可以应用于一个元素，因此您可以组合“ float ”和旋转变换。

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/