ホバリングで回転させると、品質が低くなりますか？すべての最初の

Question

よし、 - 私はタイトルは非常によく説明したわからないんだけど...

これは私が持っているものです：

私はボタンをホバー

#bookknap { 
 
\t background-color: #e9533b; 
 
\t height: 100px; 
 
\t width: 100px; 
 
\t border-radius: 50%; 
 
\t color: white; 
 
\t display:flex; 
 
\t align-items:center; 
 
\t text-align:center; 
 
\t transform:rotate(22.5deg); 
 
    -ms-transform: rotate(22.5deg); /* IE 9 */ 
 
    -webkit-transform: rotate(22.5deg); /* Chrome, Safari, Opera */ 
 
    -webkit-transition: -webkit-transform 0.5s ease-in-out; /* Animeret rotate */ 
 
\t font-family:Roboto; 
 
\t font-size:1em; 
 
\t text-transform:uppercase; 
 
} 
 

 
#bookknap:hover { 
 
    transform:none; 
 
    -webkit-transition: -webkit-transform 0.3s ease-in-out; /* Animeret rotate */ 
 
    cursor: pointer; 
 
}

<div id="bookknap">Book et møde</div>

、移行中にテキストの品質が低下しますか？なぜ、それは修正できますか？

私はHTMLとCSSだけを使ってこれをしたいと言われるべきです！

Answer 1

これを試してみてください：

1. 値translate3d(0, 0, 0)を含めるために、ボタンの両方の状態にプロパティtransformを変更します。

これにより、状態間のテキストがより滑らかに見えるようにする必要があります。

更新：

Hereは、作業コードとJSFiddleですが、私はまた、フォントのレンダリングWebKitの方法を扱う-webkit-font-smoothingと呼ばれる別のプロパティを追加しました。これは殆ど知覚できない変化につながりますが、それは文字の滑らかな見た目で多くの助けになります。

Answer 2

理由はわかりませんが、border-radius: 50%は、回転中にテキストを変形させています。これは、clip-path: circle(50% at 50% 50%)を使用して円を描く場合にも発生します。