web-dev-qa-db-ja.com

スパンでCSS3変換を使用するにはどうすればよいですか？

インライン要素（<span>）が<h1>タグにネストされています。 トランスフォームプロパティをh1に適用しました（傾斜して平行四辺形のように見えます）。
スパンタグを変換して、テキストとそのテキストを「ゆがめ」ます。しかし、これはIEでのみ機能するようです。

これは、HTMLとCSSの 例 です。

h1 {
  background: #f00;
  padding: .25em .5em;
  text-align: right;
  transform: skew(-15deg);
}
h1 span {
  color: #fff;
  transform: skew(15deg);
}
<h1><span>This is a Title</span></h1>
csscss-transforms
27
jenhan

説明：
A <span>はインライン要素であり、Transformプロパティはインライン要素に適用されません。
変換可能な要素のリストon CSS Transforms Module Level 1。

ソリューション：
スパンの表示プロパティをinline-blockまたはblockに設定します。これにより、スパン要素に変換を適用できます。
これは、<a> <em> <strong>...（ MDNのインライン要素のリスト を参照）などの他のインライン要素でも機能します。

<span>要素を含むデモは次のとおりです。

h1 {
  background: #f00;
  padding: .25em .5em;
  text-align: right;
  transform: skew(-15deg);
}
h1 span {
  color: #fff;
  display: inline-block;  /* <- ADD THIS */
  transform: skew(15deg);
}
<h1><span>This is a Title</span></h1>
48
web-tiki

ここで少し遅れますが、設定できます

h1 span{
   position:absolute;
}

次に、CSS3変換プロパティを通常どおり使用します。

1
Anurag Srivastava