The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS need help getting my logo to rotate on rollover

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #43081

    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

    -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;




    [example]( “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:]( “”)

    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. :)


    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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.