Question

我的小提琴示例：

由于某种原因，我创建的圆旋转不正确，这是一个非常奇怪的问题，当我只想将圆保持在正确的位置时，它正在旋转/摆动。

以前有人遇到过这样的问题吗？

我试图做诸如边界半径之类的东西，但是那里没有运气

我希望你们能帮助解决我的问题！

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;
}

Answer 2

请参见下面的代码...。请参见圆弧正在旋转，并且请注意圆边框也在旋转。

.circle {
	width: 500px;
	height: 500px;
  background-color:red;
 border-radius: 50%;
border: 2px dashed blue;
}

@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;
}

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

Answer 3

您应该提供相同的高度和宽度，也请尝试对圆使用正确的居中png。别忘了为.circle覆盖背景：background-size: cover;

Answer 4

您的图片的尺寸为547x530，且您的圆在此区域内，但不在¹居中。要解决此问题，您可以将容器设置为564x547。您在右边添加差异17px（547 - 530），然后使图像向左对齐，它将在容器中居中，并且可以根据需要旋转。

从底部开始还有一些像素需要考虑，以使其具有完美的中心：

.circle {
  background: url(https://i.ibb.co/8j8nSns/example.png) left bottom no-repeat;
  width: 564px;
  height: 536px;
  box-sizing: border-box;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating {
  animation: rotating 1s linear infinite;
}

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

或将对齐方式调整到右上角，并使该框为530x530。这样会修剪图像中的多余空间，并仅保留圆圈

.circle {
  background: url(https://i.ibb.co/8j8nSns/example.png) right top no-repeat;
  width: 530px;
  height: 530px;
  box-sizing: border-box;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating {
  animation: rotating 1s linear infinite;
}

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

¹为了更好地说明问题，只需在主图像上添加边框以查看左侧和底部尺寸之间的间隙：

img {
  max-width:100%;
  border:1px solid;
}

<img src="https://i.ibb.co/8j8nSns/example.png">

CSS3-圆偏斜/旋转不正确

4 个答案: