Question

我使用字体集中的微调器图标并旋转它。我必须设置transform-origin来定义图标的旋转中心以避免摆动（如建议的here）。但是，如果我改变字体大小，则会再次出现抖动效果。如果我更改浏览器分辨率，也会发生同样的情况。

HTML：

<div>
  <p>First icon</p>
  <i id="first" class="fa fa-spinner rotation-animation"></i>
</div>
<div>
  <p>Second icon</p>
  <span id="second" class="fa fa-spinner rotation-animation"></span>
</div>
<div>
  <p>Third icon</p>
  <span id="third" class="fa fa-spinner rotation-animation"></span>
</div>
<div>
  <p>Fourth icon</p>
  <span id="fourth" class="fa fa-spinner rotation-animation"></span>
</div>

CSS：

.rotation-animation {
    animation: div-rotate 0.7s infinite steps(8);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform-origin: 50% 51%;
    -webkit-transform-origin: 50% 51%;
}

@keyframes div-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes div-rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

#first {
  font-size: 20px;
}
#second {
  font-size: 30px;
}
#third {
  font-size: 40px;
}
#fourth {
  font-size: 50px;
}

https://jsfiddle.net/r944z1a6/

正如您在上面的链接中所看到的，第二个图标是唯一不会抖动的图标。如果您更改浏览器分辨率，第二个也会摇晃。

为什么会这样？更改字体大小时，旋转中心的x和y百分比偏移不应发生变化。不是吗？有没有办法解决这个问题，并使旋转器不会因任何尺寸/分辨率而摆动？

注意：我在示例中使用了字体真棒，但实际上我使用的是自定义字体，效果相同。

修改

无论@vals的答案如何，我发现的唯一不会出现摆动的方法是使用线性旋转：

animation: div-rotate 0.7s infinite linear;

它不是很酷，但有效。

Answer 1

font-awesome图标没有任何问题，并且旋转它。

尝试将其设置为200px，您将看到它完美旋转。

您看到的并且您正在尝试纠正的摇晃来自于以较小的字体大小从浏览器中舍入px。无法预测任何字体大小和浏览器缩放的大小舍入范围。

因此，获得完美解决方案的唯一方法是使您的效果更大，然后进行缩放

.rotation-animation {
    animation: div-rotate 0.7s infinite steps(8);
    transform: translateZ(0);
    transform-origin: 50% 50%;
}

@keyframes div-rotate {
      0% { transform: rotate(  0deg) scale(0.1);}
    100% { transform: rotate(360deg) scale(0.1);}
}

#first {
  font-size: 200px;
  margin: -90px;
}
#second {
  font-size: 300px;
  margin: -140px;
}
#third {
  font-size: 400px;
  margin: -180px;
}
#fourth {
  font-size: 500px;
  margin: -230px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
  <p>First icon</p>
  <i id="first" class="fa fa-spinner rotation-animation"></i>
</div>
<div>
  <p>Second icon</p>
  <span id="second" class="fa fa-spinner rotation-animation"></span>
</div>
<div>
  <p>Third icon</p>
  <span id="third" class="fa fa-spinner rotation-animation"></span>
</div>
<div>
  <p>Fourth icon</p>
  <span id="fourth" class="fa fa-spinner rotation-animation"></span>
</div>

使用旋转字体旋转

1 个答案: