web-dev-qa-db-ja.com

CSS変換はインライン要素では機能しません

Word Eの文字WEBLOGをミラーリングしたかったので、CSS変換プロパティを使用しましたが、スパン内にテキストをラップすると機能しませんが、display: inline-block;またはdisplay: block;

では、変換はインライン要素には適用されませんか？

例1 （変換失敗）

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

例2 （使用する場合は、display: block OR display: inline-block）

csscss-transforms
58
Mr. Alien

ここで 公式のW3仕様transformable element で回答

block-levelまたはatomic inline-levelのいずれかであるCSSボックスモデルによってレイアウトが管理される要素element、またはその「display」プロパティが「table-row」、「table-row-group」、「table-header-group」、「table-footer-group」、「 table-cell '、または' table-caption '[CSS21]

51
JakeGould

仕様 の更新バージョンは次のように述べています。

変換可能な要素は、次のカテゴリのいずれかの要素です。

  • 非置換インラインボックス、テーブル列ボックス、およびテーブル列グループボックスを除く、レイアウトがCSSボックスモデルによって管理されるすべての要素[ CSS2]、

  • すべてのSVGペイントサーバー要素、clipPath要素、およびテキストコンテンツ要素の子孫要素を除くSVGレンダリング可能要素[SVG2]。

すべてのinline要素を変換できるわけではなく、非置換インライン要素のみ、したがって置換インライン要素を変換できます。

したがって、基本的にimg、canvasなどに変換を適用することなく、それらをinline-blockまたは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>

置換された要素の詳細：

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

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

非置換インライン要素とは

1
Temani Afif