Why won't my icon font icon stay rotated?

Question

I am trying to a rotate an icon with transform: rotateZ(90deg) but it seems like it is ignoring it.

When I add a transition to the icon I can see the animation of the icon rotating but then it snaps back into place when it is done animating.

Here it is:

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

span {
  transition: 2s;
  border: 1px solid red;
  font-size: 500px;
}

span:hover {
  transform: rotateZ(90deg);
}

<span class="fontawesome-download-alt"></span>

Answer 1

It's because the <span> is an inline element, and inline elements are not "transformable." Simply change it's display property to inline-block.

from the W3C:

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]

According to the W3C, inline elements are not listed as "transformable".

example

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

span {
  transition: 2s;
  border: 1px solid red;
  font-size: 500px;
  display: block;
/* ^^ Change this */
}

span:hover {
  transform: rotateZ(90deg);
}

<span class="fontawesome-download-alt"></span>

Answer 2

Use DIV, not SPAN; set your width and height and add display:block; Also, add -webkit-transition: 2s; and -webkit-transform:rotateZ(90deg); for it to work on all browsers. See below code.

<style>
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

div {
  -webkit-transition: 2s;
  transition: 2s;
  border: 1px solid red;
  font-size: 500px;
  display: block;
  width: 470px;
  height: 470px;
}

div:hover {
  -webkit-transform:rotateZ(90deg);
  transform: rotateZ(90deg);
}
</style>

<div class="fontawesome-download-alt"></div>