css - Why can't inline elements be transformed?

Question

The CSS transformations spec says transforms only work on block-level or atomic inline-level elements (e.g. inline-block). But why don't they work on inline elements? What is the reasoning behind this limitation?

This test by Microsoft shows it's possible. It passes in IE9, but not in Chrome. So it's possible, just not by the spec.

Answer 1

As @Shikkediel mentioned, inline elements do not have strong boundary like block elements do. They don't influence the flow of the document in the same way, if at all, and are tightly bound to their neighboring text or elements. CSS transforms operate on the bounding box (which inline elements do technically have) in a way that wouldn't really make sense for inline elements.

Consider a <strong> within a <span> (or div). The bold text is defined only by the change in style, but can flow across multiple lines and does not have a predictable rectangular bounding area. If you were to apply a CSS rotation, where would it rotate from? How would it reflow, if at all, while rotating?

On the other hand, the containing <span> does have rectangular bounds, so finding the center and corners, rotating and scaling, are all predictable and well-defined.

As an example, take this fiddle. The background of the inline element is:

but the bounds shown by the editor are:

You can clearly see that the background and the element's bounds do not match at all. Without clear bounds, transforms because difficult and not very useful.