CSS transformが効かない
CSS transformの適用される要素は決まっていて、仕様ではtransformable elementsと呼ばれる。 そのため、他の要素に使おうとしても効かない。
transformable elements(変形可能要素) = transformが使える要素
- Block-level elements (divとか)
- atomic inline-level boxes:
replaced inline-level elements, inline-block elements, and inline-table elements
(置換インライン要素: img, input, buttonなど) - CSS display: table-* が指定された要素
- SVG (IE9だと効かない)
つまり適用されない要素は
- 普通のinline要素 = 非置換インライン要素。
span,em, など。 - あとは・・・何だろう?
参照
- transform仕様
- atomic inline-level
