CSS3 transform not working

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.

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.

In webkit-based browsers(Safari and Chrome), -webkit-transform https://stackoverflow.com/questions/4121843/applying-css-class-with-webkit-transform-does-not-work-in-safari-or-chrome">is ignored on inline elements.. Set display: inline-block; to http://phihag.de/2011/so/css3-rotate.html">make it work. For demonstration/testing purposes, you may also want to use a negative angle or a transformation-origin lest the text is rotated out of the visible area.

_{Since nobody referenced relevant documentation:}

>CSS Transforms Module Level 1 - Terminology - Transformable Element > >A transformable element is an element in one of these categories: > > - an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption > - an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform.

In your case, the <a> elements are inline by default.

Changing the display property's value to inline-block renders the elements as atomic inline-level elements, and therefore the elements become "transformable" by definition.

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

As mentioned above, this only seems to applicable in -webkit based browsers since it appears to work in IE/FF regardless.

In my case there was a CSS animation running on the element that had a transform that was overriding the transform I was adding to the element.

Are you specifically trying to rotate the links only? Because doing it http://jsfiddle.net/B7Rez/">on the LI tags seems to work fine.

http://snook.ca/archives/html_and_css/css-text-rotation">According to Snook transforms require the elements affected be block. He's also got some code there to make this work for IE using filters, if you care to add it on(though there appears to be some limitation on values).

-webkit-transform is no more needed

ms already support rotation ( -ms-transform: rotate(-10deg); )

try this:

li a {
   ...

    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -sand-transform: rotate(10deg);
    display: block;
    position: fixed;
    }