How can I use CSS3 transform on a span?

css css-transforms
jenhan picture jenhan · Jul 25, 2014 · Viewed 26.7k times · Source

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:

Answer

web-tiki picture web-tiki · Jul 25, 2014

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>

Related questions

How to apply multiple transforms in CSS?

Using CSS, how can I apply more than one transform? Example: In the following, only the translation is applied, not the rotation. li:nth-child(2) { transform: rotate(15deg); transform: translate(-20px,0px); }

Read More
Prevent flicker on webkit-transition of webkit-transform

Possible Duplicate: iphone webkit css animations cause flicker For some reason, right before my animation of the webkit-transform property occurs, there is a slight flicker. Here is what I am doing: CSS: #element { -webkit-transition: -webkit-transform 500ms; } JavaScript: $("#element").css("-webkit-transform", "…

Read More
Spin or rotate an image on hover

I want to find out how to make a spinning or rotating image when it is hovered. I would like to know how to emulate that functionality with CSS on the following code :

Read More