在保持对齐的同时以相反的方向旋转 div 和文本？

Question

所以我正在制作这个按钮，我想在悬停时设置动画。到目前为止，它工作得很好，但我正在使用的字体真棒图标在旋转时似乎会使其不对齐。

基本上，我在悬停时将父 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);
}

我网站上的运动比这个 btw 要明显得多。

提前致谢！

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>