css - 以相反的方向旋转 div 和文本，同时保持它们对齐？

Question

所以我正在制作这个按钮，当鼠标悬停在上面时我想制作动画。到目前为止它工作得很好但是我使用的 Font Awesome 图标在旋转时似乎会自行对齐。

基本上，我在悬停时将父 div 旋转了 45 度。

为了解决这个问题，我还在鼠标悬停时将超赞字体图标旋转了 -45 度。

然而，由于某种原因，这导致它向左移动。我该如何定位它，使其在悬停时不会移动(或者至少不会给人移动的印象)。

在这里查看 jsfiddle: 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);
}

我网站上的移动比这顺便说一句要明显得多。

提前致谢!

Answer 1

保持内部 i 的高度和宽度为父尺寸的 100%!
为了操纵它的大小，将它设置为 inline-block

我的看法:

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>