变换旋转在 chrome 中无法正常工作答案

【问题标题】：Transform rotate not working properly in chrome变换旋转在 chrome 中无法正常工作
【发布时间】：2014-12-23 12:13:07
【问题描述】：

以下代码在 safari 中呈现一个完美的旋转圆圈，但在 chrome 中没有。

<style>
.circle{
    height:1000px;
    width:1000px;
    background-color:#000;
    border-radius: 50%;
}

@-webkit-keyframes rotating {
from{
    -webkit-transform: rotate(0deg);
}
to{
    -webkit-transform: rotate(360deg);
}
}

.rotating {
    -webkit-animation: rotating 2s linear infinite;
    -webkit-transform-origin: center;
}
</style>

<div class="circle rotating">
</div>

http://jsfiddle.net/p4ban9cs/

渲染不完美，旋转大圆圈时可以看到问题，就像 chrome 上的摆动圆圈。

谢谢你的帮助。

【问题讨论】：

那么问题是什么，不是旋转？不是完美的圆？
你的小提琴在 Chrome 中对我有用。
@AndréDion 对我来说，它呈现了一个“摆动”的圆圈（chrome 39 wind 7）
stackoverflow.com/questions/24070899/… 有一个已解决的重复问题，建议似乎是使用图像..
@ensixte 如果它用于相同元素的溢出内容，为什么不移除外部阴影并将overflow:hidden 设置为它？ jsfiddle.net/L2r6tjq8/2

标签： css google-chrome transform

【解决方案1】：

添加一个外部元素作为包装器并对其应用相同的样式，以掩盖内圈旋转，如 Fiddle 所示

<div class="overlay">
    <div class="circle rotating">Test</div>
</div>

.overlay{
    height:1000px;
    width:1000px;
    box-shadow:0 0 0 10px #000 ;
    background:black;
    border-radius: 50%;
}

【讨论】：

感谢您的帮助 =)，但它似乎不起作用，只需更改覆盖框阴影的颜色即可查看结果 jsfiddle.net/p4ban9cs/18 与相同的颜色看起来是正确的，但是没有解决问题，我尝试了很多隐藏技巧，但没有一个有效（没有视觉上完美的结果），这就是为什么我找到问题的根源，为什么 chrome 会这样渲染？！再次感谢您的帮助。
@ensixte 这并不是要解决问题的根源。它的目的是在视觉上看起来不错；-) 问题似乎是 chrome 如何计算 border-radius 的问题我尝试通过在没有 border-radius 的情况下旋转来验证这一点，但很难确认它围绕正确的枢轴点旋转，完美带角的圆圈...