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.

FYI, IE does support this CSS3 property, you just need a prefix: `-ms-transform:rotate(10deg);` — Joshua Pinter, Feb 13 '15 at 03:02
Possible duplicate of [CSS transform doesn't work on inline elements](http://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements) — mems, Mar 30 '16 at 10:57
Since nobody has mentioned this yet, since it's 2016 now make sure you place the unprefixed version of the CSS rule (e.g. `transform: rotate(10deg);`) underneath whichever prefixed versions you choose to support. — Maximillian Laumeister, Jun 03 '16 at 02:00

score 433 · Accepted Answer · answered Feb 07 '11 at 10:15

433

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.

answered Feb 07 '11 at 10:15

thirtydot

224,678
48
389
349

9

An explanation would be helpful :) – Benjamin Ashbaugh Dec 22 '19 at 00:55
10

Explanation: Inline elements behave like text, while block elements behave like containers. You cannot rotate text characters, but you can rotate their container. See [this](https://www.impressivewebs.com/difference-block-inline-css/) and [this](https://www.lifewire.com/block-level-vs-inline-elements-3468615) and [this](https://www.w3schools.com/htmL/html_blocks.asp). *(Did you know is an inline element? Whodathunk...?)* – crashwap Aug 28 '20 at 18:56
1

In my case I was transforming a `::before` on a button, `inline-block` didn't work for me but `flex` did??? – Luke T O'Brien Feb 15 '21 at 15:29
Not just rotate, but this applies to any kind of transform. – blissweb Jun 22 '21 at 05:23

score 69 · Answer 2 · edited May 23 '17 at 11:47

69

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.

edited May 23 '17 at 11:47

Community

1
1

answered Feb 07 '11 at 10:25

phihag

278,196
72
453
469

Worked perfectly for me, thank you! I used it on &copy to make a copyleft symbol. – Elisabeth Dec 02 '11 at 01:17
@Elisabeth That's an excellent application. Note that entity references need to be terminated by a semi-colon though (as in `©`), although most browsers render both ways. – phihag Dec 02 '11 at 08:35
Another note: if you're applying the transform for an interaction state (e.g., `:hover` or `:active`) you'll need to apply the `inline-block` to the element in its default state, e.g., `a { display: inline-block; } a:active { transform: translateY(0.125em); }`. Applying `inline-block` to the interaction state alone doesn't seem to work. In Chrome at least -- it works fine in Firefox. – Paul d'Aoust Jan 24 '13 at 23:39
1

thanks for pointing out the fact that `-webkit-transform` doesn't work on inline items. Had been stuck on this previously. – pbojinov May 12 '14 at 03:58
@phihag Excellent point, you saved me some major hair-pulling! Worth noting that this can cause your elements to disappear after the animation has run. – texelate Jul 07 '16 at 12:35

score 36 · Answer 3 · edited Jun 20 '20 at 09:12

_{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.

score 18 · Answer 4 · answered Aug 10 '21 at 03:10

18

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.

answered Aug 10 '21 at 03:10

Jonathan

1,007
16
12

5

This needs more votes! This was exactly my problem. I ended up wrapping the animating element in a container and then applying the transform to the container instead. – Rich Dec 13 '21 at 19:04
1

I just added `!important` and it worked so the issue originated from where you mentioned. Thank you! – kodfire Mar 19 '23 at 12:45

score 0 · Answer 5 · answered Feb 07 '11 at 10:17

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

score -4 · Answer 6 · edited May 05 '14 at 17:01

-4

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

edited May 05 '14 at 17:01

neubert

15,947
24
120
212

answered May 05 '14 at 16:45

pdj

1
1
3

1

During my tests today, I noticed that `-webkit-transform` was indeed no longer needed in Chrome. However, it was still needed in Safari 8. – John Slegers Dec 18 '14 at 13:42
What is -sand-transform for? A brief Google search turned up nothing. – Pete May 08 '15 at 16:00
google 'CSS Sandpaper' which is relevant to the question and may make things easier. it is a hack that implements support for the standard CSS transform for old versions of IE – Pedro Justo May 10 '15 at 23:51

CSS3 transform not working

6 Answers6

Linked