使用旋轉字體的旋轉字體

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>