How can I use CSS3 transform on a span? - css

Question

I have an 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>

Answer 1

Explanation:
A <span> or a link (<a>) are inline elements and the transform property doesn't apply to inline elements.
Here is the list of transformable elements from the CSS Transforms Module Level 1.
Solution:
Set the display property of the span to inline-block or block. This will let you apply transforms to the span element.
It also works for other inline elements like <a> <em> <strong>... (see the list of inline elements on MDN).
Here is a demo with the <span> and link <a> elements :
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>This is a link in a title</h1>

Answer 2

A little late here, but you can set
h1 span{
position:absolute;
}
Then use the CSS3 transform properties normally. 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>