html - CSS3 - 圆形旋转倾斜/不正确

Question

我的 fiddle 示例:

https://jsfiddle.net/e4rL56ja/

由于某种原因，我创建的圆圈旋转不正确，这是一个非常奇怪的问题，当我只想让它停留在一个准确的位置时，它会四处移动/摆动。

有没有人遇到过这样的问题？

我尝试做诸如 border-radius 之类的事情，但是那里没有运气

希望大家能帮帮我!

HTML:

<div class='circle rotating'>

</div>

CSS:

.circle {
  background: url(https://i.ibb.co/8j8nSns/example.png) no-repeat;
    width: 547px;
    height: 530px;
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.rotating {
    -webkit-animation: rotating 1s linear infinite;
    -moz-animation: rotating 1s linear infinite;
    -ms-animation: rotating 1s linear infinite;
    -o-animation: rotating 1s linear infinite;
    animation: rotating 1s linear infinite;
}

Answer 1

您看到的摆动是由于 height 和 width 不一样。 “完美”圆将具有完全相同的 height 和 width。我还更改了背景，使其不是摆动圆圈本身的图像。并添加了 50% 的边界半径。您现在可以清楚地看到圆圈在正常旋转。

https://jsfiddle.net/3gktzevm/

.circle {
    background: linear-gradient(to right, #333333, #dd1818);
    width: 530px;
    height: 530px;
    border-radius: 50%;
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.rotating {
    -webkit-animation: rotating 1s linear infinite;
    -moz-animation: rotating 1s linear infinite;
    -ms-animation: rotating 1s linear infinite;
    -o-animation: rotating 1s linear infinite;
    animation: rotating 1s linear infinite;
}