web-dev-qa-db-fra.com

La transformation CSS ne fonctionne pas sur les éléments en ligne

Je voulais refléter la lettre E dans Word WEBLOG, donc j'ai utilisé la propriété de transformation CSS, mais cela ne fonctionne pas si je place le texte dans une plage, mais cela fonctionne si j'ai assing display: inline-block; ou display: block; 

Les transformations ne s'appliquent donc pas aux éléments en ligne?

Exemple 1 (Échec de la transformation)

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

Exemple 2 (Fonctionne, si utilisé display: block OR display: inline-block)

css3css-transforms
56
Mr. Alien

Répondu ici dans les spécifications officielles W3 sous élément transformable :

un élément dont la présentation est régie par le modèle de boîte CSS qui est soit un élément de niveau en ligne block-level ou atomic, ou dont La propriété ‘display’ se calcule en ‘table-row’, ‘table-row-group’, "Groupe d'en-tête de table", "groupe de pied de table", "cellule de table" ou 'Légende du tableau' [CSS21]

51
JakeGould