在悬停时旋转过渡会降低质量？答案

【问题标题】：Rotate on hover with transition makes quality low?在悬停时旋转过渡会降低质量？
【发布时间】：2017-02-15 15:41:08
【问题描述】：

好吧，首先 - 我不确定标题是否解释得很好......

这就是我所拥有的：

#bookknap {
	background-color: #e9533b;
	height: 100px;
	width: 100px;
	border-radius: 50%;
	color: white;
	display:flex;
	align-items:center;
	text-align:center;
	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 */
	font-family:Roboto;
	font-size:1em;
	text-transform:uppercase;
}

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

  &lt;div id="bookknap"&gt;Book et møde&lt;/div&gt;

当我悬停按钮时，文本质量在过渡时会降低？为什么，可以修复吗？

应该提到我只想使用 HTML 和 CSS 来做这件事！

【问题讨论】：

标签： html css rotation css-transitions transform

【解决方案1】：

试试这个：

修改按钮两种状态的属性transform，以包含值translate3d(0, 0, 0)；

这应该使文本在状态之间看起来更平滑。

更新：

Here 是一个带有工作代码的 JSFiddle，我还添加了另一个名为 -webkit-font-smoothing 的属性，它处理 WebKit 如何呈现字体。这会导致几乎无法察觉的变化，但这对字母的平滑外观有很大帮助。

【讨论】：

我试过了——虽然我可能做错了，但是当我这样做时——它甚至不会再变形了吗？ jsfiddle.net
@CarstenAndersen，用小提琴更新答案
谢谢 - 看起来很棒。虽然我遇到了问题，但在使用我的 MacBook 时不会发生？仍然在 Chrome 上。不过会使用它。

【解决方案2】：

我不知道为什么，但 border-radius: 50% 导致文本在旋转过程中发生变换。如果您使用clip-path: circle(50% at 50% 50%) 制作圆圈，也会发生这种情况。

【讨论】：