How can I use CSS3 transform on a span?

Question

I have a inline element (a ) nested in a

tag. I applied a transform property to the

Answer 1

Explanation:
A is an inline elements and Transform property doesn't apply on inline elements.
List of transformable elements on 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 ... (see the list of inline elements on MDN).

Here is a demo with the element :

h1 {
  background: #f00;
  padding: .25em .5em;
  text-align: right;
  transform: skew(-15deg);
}
h1 span {
  color: #fff;
  display: inline-block;  /* <- ADD THIS */
  transform: skew(15deg);
}

This is a Title