Reputation: 1753
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
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
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
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
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
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
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