Transformacja CSS nie działa na elementach wbudowanych

Chciałem odbić literę E w słowie WEBLOG więc użyłem właściwości CSS transform, ale to nie działa, jeśli zawijam tekst wewnątrz span, ale działa, jeśli dodam display: inline-block; lub display: block;

Czyli transforms nie ma zastosowania do elementów wbudowanych?

Przykład 1 (Nie Przekształca Się) 

<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 */
}

Przykład 2 (Działa, jeśli jest używany display: block lub display: inline-block)

Author: Temani Afif, 2013-02-14
Source

2 answers

Odpowiedzi tutaj w oficjalnej specyfikacji W3 Pod element transformowalny:

Element, którego układ jest regulowany przez CSS box model, który jest a block-level or atomic inline-level element, or which właściwość' display 'oblicza na' table-row','table-row-group', "table-header-group", "table-footer-group", "table-cell", lub "table-caption "[CSS21]

 58
Author: Giacomo1968,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-05 15:45:34

Zaktualizowana wersja Specyfikacja mówi:

Element transformowalny jest elementem w jednej z tych kategorii:

  • Wszystkie elementy, których układ jest regulowany przez model pudełkowy CSS, z wyjątkiem nie zastąpionych pól inline , pól table-column i pól table-column-group [CSS2],

  • Wszystkie elementy SVG paint server, element clipPath i elementy renderowalne SVG z wyjątkiem elementów potomnych tekstu elementy zawartości [SVG2].

Należy zauważyć, że nie wszystkie inline elementy nie mogą być przekształcone, ale tylko nie zastąpione inline elementy w ten sposób zastąpione inline elementy mogą być przekształcane.

Więc zasadniczo możemy zastosować transformację do img, canvas, itd bez potrzeby ich tworzenia inline-block lub 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>

Więcej szczegółów na temat wymiany elementy:

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

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

Co to jest nie wymieniany element wbudowany?

 4
Author: Temani Afif,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-20 09:12:55