Wie kann ich die CSS3-Transformation für einen Span verwenden? [duplicate]

ich habe ein Inline-Element (A <span>) verschachtelt in a <h1> Schild. Ich habe mich beworben verwandeln Eigentum an die h1 ( skew es sieht also aus wie ein Parallelogramm).
Ich muss einfach verwandeln Die <span> Tag, um es und seinen Text zu „entzerren“. Aber das scheint nur im IE zu funktionieren.

Hier ist ein Beispiel des HTML und 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>

Erläuterung:

A <span> oder ein Link (<a>) sind Inline-Elemente und die Die Transformationseigenschaft gilt nicht für Inline-Elemente.
Hier ist das Liste transformierbarer Elemente aus dem CSS-Transformationsmodul Level 1.

Lösung:

Legen Sie die Anzeigeeigenschaft des Bereichs auf fest inline-block oder block. Dadurch können Sie Transformationen auf das Span-Element anwenden.
Es funktioniert auch für andere Inline-Elemente wie <a> <em> <strong>… (siehe die Liste der Inline-Elemente auf MDN).

Hier ist eine Demo mit dem <span> und verlinken <a> Elemente:

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>

Hier ist es etwas spät, aber man kann es einstellen

h1 span{
   position:absolute;
}

Verwenden Sie dann wie gewohnt die CSS3-Transformationseigenschaften. Demo:

h1 {
  background: #f00;
  padding: .25em .5em;
  text-align: right;
  transform: skew(-15deg);
  height: 40px;
}

h1 span {
  position: absolute;
  left: 20px;
  color: #fff;
  transform: skew(15deg);
}

<h1><span>This is a Title</span></h1>