How can I use CSS3 transform on a span?

Problem

I have a inline element (a <span>) nested in a <h1> tag. I applied a transform property to the h1 ( skew so it looks like a parallelogram).
I need to transform the span tag to "unskew" it and its text. But this only seems to work in IE.

Here is an example of the HTML and 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>

Problem courtesy of: jenhan

Solution

Explanation:
A <span> is an inline elements and Transform property doesn't apply on inline elements.
List of transformable elements on the on the CSS Transforms Module Level 1.

Solution:
Set the display property of the span to inline-block or block :

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>

Solution courtesy of: web-tiki

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.