☰

span で CSS3 変換を使用するにはどうすればいいですか? [重複] 質問する

tag-icon • tag-icon html css css-transforms
span で CSS3 変換を使用するにはどうすればいいですか? [重複] 質問する

を持っていますインライン要素(a <span>)<h1>タグ内にネストされています。変身h1（skew平行四辺形のように見える）プロパティを追加
します。変身タグ<span>とそのテキストを「歪めない」ようにします。ただし、これは 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>

ベストアンサー1

説明：
または<span>リンク（<a>）はインライン要素であり、transformプロパティはインライン要素には適用されません.
ここは変換可能な要素のリスト CSS Transforms モジュール レベル 1 より。

解決：
spanのdisplayプロパティを または に設定しますinline-block。blockこれにより、span要素に変換を適用できます。これは、...
などの他のインライン要素にも適用できます（<a> <em> <strong>MDN のインライン要素のリスト）。

<span>以下は、 および link要素を使用したデモです<a>。

h1 {
  background: teal;
  padding: .25em .5em;
  margin: 1em;
  transform: skew(-15deg);
}
h1 span,
h1 a {
  color: #fff;
  display: inline-block;  /* <- ADD THIS */
  transform: skew(15deg);
}
<h1><span>This is a span in a title</span></h1>
<h1><a href="#">This is a link in a title</a></h1>

おすすめ記事