Forums

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
    Posts
  • #43081
    painefw
    Member

    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

    #126612
    Kitty Giraudel
    Participant

    In your stylesheet:

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

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

    Don’t forger the prefixes. :)

    #126622
    painefw
    Member

    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.