使用带有旋转的微调器字体

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 百分比偏移量不应更改。不是吗？ 有什么办法可以解决这个问题并使微调器在任何尺寸/分辨率下都不会摆动？

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

编辑：

不管@vals 的回答如何，我发现的唯一似乎不会摇晃的方法是使用线性旋转：

animation: div-rotate 0.7s infinite linear;

这不是很酷，但很有效。

Answer 1

字体真棒图标没有任何问题，并且旋转它。

尝试将其设置为 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>