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>

Greenwell

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>

Rieth

Is this in the spec somewhere? Can't find anything about it – Priscella

Yes I know where the spec is. But where is it mentioned that inline elements revert to their original state after a transition? – Priscella

hmmm...snippet still loads downside for me. – Sticker

That's not the problem, @SurgeonofDeath. When it was hovered, the animation refverted back to down. Now it stays in place while hovered. – Rieth

@uʍopǝpısdn, you can see in the above spec that <span> is not listed as a "transformable element." – Rieth

That still wouldn't explain why it would transform and then revert back. The transition shouldn't happen at all. Edit: after testing it seems Firefox and Safari dont' trigger the transform, only Chrome – Priscella

It's not supposed to happen. It must be a chrome bug. @uʍopǝpısdn. – Rieth

this is why people hate CSS – Koal

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>

Express