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

Giacomo1968 · Accepted Answer · 2016-12-05 15:45:34Z

69

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]

edited Dec 5, 2016 at 15:45

answered Feb 14, 2013 at 20:17

Giacomo1968

25.3k11 gold badges78 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

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<all.length;i++) {
 console.log(window.getComputedStyle(all[i],null).getPropertyValue("display"));
}

canvas {
  background:red;
}

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

<img src="https://picsum.photos/200/200?image=1069" class="replaced">
<canvas class="replaced"></canvas>

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?

Collectives™ on Stack Overflow

CSS transform doesn't work on inline elements

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related