need help getting my logo to rotate on rollover

[painefw]

Hi, So basically i would like the logo of my website to rotate on rollover. Im running a theme i recently bought on wordpress and have been struggling amending the right bits of code.

I have managed to find the code to actually make the transition

.rotate{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;

overflow:hidden;

}

.rotate:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}

[example](http://blog.vivekv.com/demo/rotate_image/ “example”)

I just have no idea where i am supposed to place this code in order to create this effect. I am assuming in the stylesheet but nothing that i am trying is working. My website is live [here:](http://www.dmstremel.com “dmstremel.com”)

if you need any more info, bits of code to further assist me do let me know.

any help would be greatly appreciated

[Kitty Giraudel]

In your stylesheet:

#logo {
transition: all .8s ease-out;
}

#logo:hover {
transform: rotate(360deg);
}

Don’t forger the prefixes. :)

[painefw]

You absolute diamonds! Works a treat, didnt think it was that easy. I always complicate solutions in my head when it comes to CSS. Cheers guys

[Author]

Posts