Forums

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

Home › Forums › CSS › [Solved] -webkit-transform not working?

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • September 12, 2010 at 12:27 pm #30220
    ldj
    Member

    I’m trying to apply a little animation to my navigation on my site using the following CSS:

    nav a:hover:nth-child(odd)
    
{
    
-webkit-transform: rotate(-10deg) scale(2.5);
    
-moz-transform: rotate(-10deg) scale(2.5);
    
-o-transform: rotate(-10deg) scale(2.5);
    
}
    
nav a:hover:nth-child(even)
    
{
    
-webkit-transform: rotate(5deg) scale(2.2);
    
-moz-transform: rotate(5deg) scale(2.2);
    
-o-transform: rotate(5deg) scale(2.2);
    
}

    This is working fine in Opera and Firefox, but in the latest version of Chrome, hovering over the links does nothing. Is there any special syntax or additional code required for Webkit? Looking aroudn the web I can’t see anything wrong.

    Thanks

    September 12, 2010 at 7:14 pm #79987
    virtual
    Participant

    You mention Opera and Firefox which are targeted respectively by -o and -moz . Have you tried Safari, -webkit targets Safari and Chrome. Are you using position fixed, as there is a problem when using both together.

    September 12, 2010 at 7:41 pm #79964
    Chris Coyier
    Keymaster

    I wonder if you gotta list the :nth-child first

    nav a:nth-child(even):hover

    Shoudn’t matter but this way feels more correct to me

    September 13, 2010 at 12:17 pm #79921
    ldj
    Member

    @chriscoyier: Agreed. Reads better thats for sure. Makes no difference to the functionality/behaviour though.


    @virtual    : tried it in Safari – same thing, not working at all :(

    September 13, 2010 at 12:27 pm #79927
    ldj
    Member

    I’ve set the position:relative explicitly which has also made no difference. Also added ‘background-color: blue;’ to the CSS which is happening in Chrome, so I know the hover event is firing in Chrome, making it even stranger!

    September 13, 2010 at 3:23 pm #79905
    shagzdesign
    Member

    can you post a link to the live code that way someone might see something you missed?

    September 13, 2010 at 9:14 pm #79838
    Chris Coyier
    Keymaster

    Or a quick reduced test case in http://jsbin.com would be good.

    September 23, 2010 at 12:25 pm #79194
    ldj
    Member

    Just thought I’d update this. I solved it by adding display:block to nav:a elements. Seems Webkit won’t transform them otherwise.

    Live & learn I guess!!! :(

    October 30, 2011 at 1:09 am #89920
    gildean
    Member

    Just to give more info on people stumbling on to this thread:

    Use display: inline-block for the transform: scale to work on chrome, firefox and opera and not to break the styling.
    With inline-block you can use scale straight on text-links and have them work nicely with all modern browsers except IE.
    A small example on one of my linux-project pages here: http://julkinen.salaliitto.com/ac100

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