Why won't the icon icon of the icon rotate?
I am trying to rotate the icon with transform: rotateZ(90deg)
, but it seems like it is ignoring it.
When I add a transition to the icon, I see the animation rotate the icon, but then it snaps into place when done to animate.
Here he 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>
source to share
This is because it <span>
is an inline element, and inline elements are not "transformable". Just change the property display
to inline-block
.
from W3C:
element to be transformed
The element being converted is an element in one of these categories: an element whose layout is determined by the CSS window model, which is either a block-level or atomic line-level element or a mapping property calculates row-table, row-group-table, header-group-table, 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>
source to share
Use DIV, not SPAN; set width and height and add display:block;
Also add -webkit-transition: 2s;
and -webkit-transform:rotateZ(90deg);
to make it work in 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>
source to share