开发者

CSS3 - Floating up on hover, rotating when clicked on (active) but keeping the image in the same place?

开发者 https://www.devze.com 2023-03-20 01:24 出处：网络

Here is an example of what I mean: JS Fiddle: http://jsfiddle.net/MWAJC/ As you can see, when you hover over the image, the image floats up, then when you click on it, the image goes back to its ori

相关专题：css

Here is an example of what I mean:

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

As you can see, when you hover over the image, the image floats up, then when you click on it, the image goes back to its original position while rotating. I would like it so that the image rotates in the already 'floated' posit开发者_高级运维ion. How would I go about this?

Multiple transformations can be applied to an element, so you can combine your 'float' and rotation transforms.

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/