Sanjeev K Sanjeev K - 27 days ago 11
CSS Question

Transform rotate on hover shifting up one pixel

I have created a circle with a fontAwesome icon in it, and on hover, rotating it 180 degree that is working fine, But on hover when I mouseover and when icon moving to 180 its moving up by one pixel, not sure why.

My question is why its moving up by one pixel on hover, I'm not able to find the issue.

Here is the JSFiddle demo

EDIT Please note that its happening in Firefox only.



.share-icon {
background-color: #f00;
border-radius: 50%;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
color: #ffffff;
float: left;
font-size: 18px;
height: 45px;
line-height: 45px;
margin-top: 50px;
position: relative;
text-align: center;
width: 45px;
transition: all 0.5s ease 0s;
cursor: pointer;
}
.share-icon:hover {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="share-icon" onclick="shairIcon(this)">
<i class="fa fa-share-alt" aria-hidden="true"></i>
</div>




Answer

Refer this css, i have made correction.

You should add fa icon class on hover and add transition property.

.share-icon:hover .fa-share-alt {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -moz-transition: all 500ms ease;
}

Working DEMO!!!