How can I use CSS3 transform on a span?
css, css-transforms, html
Solution
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><a href="#">This is a link in a title</a></h1>
Problem
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> ```