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

Posted 2023-05-08

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

【英文标题】：Rotating div AND text in opposite directions whilst keeping them aligned?

【发布时间】：2015-10-08 10:11:12

【问题描述】：

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

基本上，我在悬停时将父 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 要明显得多。

提前致谢！

【问题讨论】：

我已经用试验和错误填充修复了它（有点），看起来还不错。仍然想知道是否有更清洁/更有效的方法来做到这一点。

【参考方案1】：

将内部i 的高度和宽度保持在父尺寸的100%！ 为了使用它的大小进行操作，请将其设置为inline-block

我的看法：

bodybackground:#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>

【讨论】：

太棒了！看起来是这样的。我回家后会试一试，我会告诉你的，干杯伙伴。