Why CSS transform doesn't work on inline elements

By on

CSS TRANSFORM DOESN’T WORK! WHY?

// index.html
<footer>
	<p><a href="blablabla">
    	<i class="fa fa-twitter fa-2x"></i>
    </a></p>
</footer>

// main.css
i:hover {
	color: #468ae9;
	-webkit-transform: rotate(360deg);	/* Safari & Chrome */
    -o-transform: rotate(360deg);	/* Opera */
    -moz-transform: rotate(360deg); /* Firefox 4 */
    transform: rotate(360deg);
}

Transformable element

A transformable element is an element in one of these categories:

  • an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]
  • an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform [SVG11].

Ref：http://dev.w3.org/csswg/css-transforms-1/

Fix it:

// index.html
<footer>
	<p class="animation"><a href="blablabla">
    	<i class="fa fa-twitter fa-2x"></i>
    </a></p>
</footer>

// main.css
p.animation:hover {
	color: #468ae9;
	-webkit-transform: rotate(360deg);	/* Safari & Chrome */
    -o-transform: rotate(360deg);	/* Opera */
    -moz-transform: rotate(360deg); /* Firefox 4 */
    transform: rotate(360deg);
}