- This topic is empty.
September 12, 2010 at 12:27 pm #30220
I’m trying to apply a little animation to my navigation on my site using the following CSS:
-webkit-transform: rotate(-10deg) scale(2.5);
-moz-transform: rotate(-10deg) scale(2.5);
-o-transform: rotate(-10deg) scale(2.5);
-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.
ThanksSeptember 12, 2010 at 7:14 pm #79987virtualParticipant
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 #79964Chris CoyierKeymaster
I wonder if you gotta list the :nth-child first
Shoudn’t matter but this way feels more correct to meSeptember 13, 2010 at 12:17 pm #79921September 13, 2010 at 12:27 pm #79927
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 #79905shagzdesignMember
can you post a link to the live code that way someone might see something you missed?September 13, 2010 at 9:14 pm #79838September 23, 2010 at 12:25 pm #79194
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 #89920gildeanMember
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
- The forum ‘CSS’ is closed to new topics and replies.