Question

I am trying to transform my menu items by rotating them 10 degrees. My CSS works in Firefox but I’ve failed to replicate the effect in Chrome and Safari. I know IE doesn’t support this CSS3 property so that’s not a problem.

I used following CSS:

li a {
   -webkit-transform:rotate(10deg);
   -moz-transform:rotate(10deg);
   -o-transform:rotate(10deg); 
}

Could anybody please suggest where I am going wrong?

Thanks.

Answer 1

This is merely an educated guess without seeing the rest of your HTML/CSS:

Have you applied display: block or display: inline-block to li a? If not, try it.

Otherwise, try applying the CSS3 transform rules to li instead.