CSS transform doesn't work on inline elements

css css-transforms
Mr. Alien picture Mr. Alien · Feb 14, 2013 · Viewed 40.6k times · Source

I wanted to mirror letter E in the word WEBLOG so I used CSS transform property but it doesn't work if I wrap the text inside a span but it works if I assing display: inline-block; or display: block;

So transforms doesn't apply to inline elements?

Example 1 (Fails To Transform)

<h1>W<span>E</span>BLOG</h1>

h1 span {
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); /* IE 9 */
    -moz-transform:rotate(7deg); /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    -o-transform:rotate(7deg); /* Opera */
}

Example 2 (Works, If Used display: block OR display: inline-block)

Answer

Giacomo1968 picture Giacomo1968 · Feb 14, 2013

Answered here in the official W3 specifications under transformable element:

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’ [CSS21]

Related questions

How to apply multiple transforms in CSS?

Using CSS, how can I apply more than one transform? Example: In the following, only the translation is applied, not the rotation. li:nth-child(2) { transform: rotate(15deg); transform: translate(-20px,0px); }

Read More
Prevent flicker on webkit-transition of webkit-transform

Possible Duplicate: iphone webkit css animations cause flicker For some reason, right before my animation of the webkit-transform property occurs, there is a slight flicker. Here is what I am doing: CSS: #element { -webkit-transition: -webkit-transform 500ms; } JavaScript: $("#element").css("-webkit-transform", "…

Read More
Spin or rotate an image on hover

I want to find out how to make a spinning or rotating image when it is hovered. I would like to know how to emulate that functionality with CSS on the following code :

Read More