CSS transform doesn't work on inline elements

Question

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

Answer 1

The updated version of the specification says:

A transformable element is an element in one of these categories:

• all elements whose layout is governed by the CSS box model except for non-replaced inline boxes, table-column boxes, and table-column-group boxes [CSS2],

• all SVG paint server elements, the clipPath element and SVG renderable elements with the exception of any descendant element of text content elements [SVG2].

We should note that not all the inline elements cannot be transformed but only the non-replaced inline elements thus the replaced inline elements can be transformed.

So basically we can apply transformation to img, canvas, etc without the need of making them inline-block or block

var all = document.querySelectorAll('.replaced');

for(var i=0;i

canvas {
  background:red;
}

.replaced {
  transform:rotate(20deg);
}

More details about replaced elements:

https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements

https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

what is a non-replaced inline element?