CODEWITHSUNDEEP
htmlcss
shruti
shruti

Reputation: 1753

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.

Upvotes: 175

Views: 241180

Answers (6)

Jonathan
Jonathan

Reputation: 1459

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.

Upvotes: 22

Josh Crozier
Josh Crozier

Reputation: 241278

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.

Upvotes: 38

pdj
pdj

Reputation: 1

-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;
    }

Upvotes: -4

phihag
phihag

Reputation: 288298

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.

Upvotes: 73

Su&#39;
Su&#39;

Reputation: 2166

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).

Upvotes: 0

thirtydot
thirtydot

Reputation: 228302

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.

Upvotes: 450

Related Questions