CODEWITHSUNDEEP
cssbuttonrotationhoverfont-awesome
Kerr Scott
Kerr Scott

Reputation: 25

Rotating div AND text in opposite directions whilst keeping them aligned?

So I'm making this button whick I would like to animate when hovered over. So far it works great but the font awesome icon I'm using seems to knock itself out of alignment when it rotates.

Basically I've rotated the parent div 45 degrees on hover.

To counteract this I've also rotated the font awesome icon -45 degrees on hover.

However for some reason this caused it to move to the left. How do I position this so it doesn't move (or at least, doesn't give the impression that it moves) when hovered upon.

Check out the jsfiddle here : https://jsfiddle.net/krustytoast/eu4dugdz/

<!-- HTML -->
<div id="scroll"><i class="fa fa-angle-down scrollicon"></i></div>
#scroll {
width:70px;
height: 70px;
color: #FFFFFF;
margin-right: auto;
margin-left: auto;
font-size: 75px;
text-align: center;
vertical-align: middle;
line-height: 64px;
border-radius: 50%;
border-style: solid;
border-width: 5px;
border-color: #FFFFFF;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}


.scrollicon {
line-height: 64px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}


#scroll:hover .scrollicon,
#scroll:hover ~ .scrollicon {

line-height: 74px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}


#scroll:hover {
cursor: pointer;
border-radius: 0%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}

The movement on my site is far more pronounced than this btw.

Thanks in advance!

Upvotes: 2

Views: 620

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206505

Keep height and width of the inner i at 100% the parent size!
in order to manipulate with it's size set it to inline-block

My take:

body{background:#678;}

#scroll {
  width:      70px;
  height:     70px;
  cursor:     pointer;
  transition: 0.5s;
  border:     5px solid #fff;
  border-radius: 50%;
}

#scroll > i {
  display:     inline-block;
  width:       100%;
  height:      100%;
  line-height: 74px;
  font-size:   74px;
  text-align:  center;
  color:       white;
  transition:  0.5s;
}

#scroll:hover {
  border-radius: 0;
  transform:     rotate(45deg);
}
#scroll:hover > i {
  transform: rotate(-45deg);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<div id="scroll">
  <i class="fa fa-angle-down"></i>
</div>

Upvotes: 1

Related Questions