How can I use CSS3 transform on a span?

Explanation:
A <span> 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 <a> <em> <strong>... (see the list of inline elements on MDN).

Here is a demo with the <span> 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);
}

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

A little late here, but you can set

h1 span{
   position:absolute;
}

Then use the CSS3 transform properties normally.

How can I use CSS3 transform on a span?

Related

Recent Posts