以相反的方向旋转 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);
}

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

提前致谢！

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>

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

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

css

rotation

button

hover

font-awesome