CODEWITHSUNDEEP
htmlcss
Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

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>

Upvotes: 2

Views: 1026

Answers (2)

SvenL
SvenL

Reputation: 1954

Honestly I don't know exactly why but if you increase your font-size just by two pixels you'll get rid of this jump. Simply update your code to the following

.share-icon {
  background-color: #f00;
  border-radius: 50%;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
  color: #ffffff;
  height: 45px;
  width: 45px;
  line-height: 45px;
  text-align: center;
  cursor: pointer;
  font-size: 20px;
}
.share-icon i {
  transition: all 0.5s ease 0s;
}
.share-icon:hover i {
  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>

Upvotes: 1

Logeshwaran
Logeshwaran

Reputation: 461

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!!!

Upvotes: 1

Related Questions