CSS3 transform not working

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

User · Answer

In webkit-based browsers Safari and Chrome   -webkit-transform is ignored on inline elements   Set display  inline-block  to 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

User · Answer

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  lt a gt  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  quot transformable quot  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

User · Answer

Are you specifically trying to rotate the links only  Because doing it on the LI tags seems to work fine   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

User · Answer

-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

User · Answer

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

[html] CSS3 transform not working

Examples related to html

Examples related to css