CSS3 - круг вращается с наклоном / неправильно

Question

Мой пример скрипки:

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

Ваше изображение имеет размер 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">

Answer 2

Колебание, которое вы видите, происходит из-за того, что 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 3

Вы должны давать одинаковую высоту и ширину, также попробуйте использовать правильный центрированный png для круга.Не забудьте также покрыть фон для .circle: background-size: cover;

Answer 4

См. Нижеприведенный код .... и посмотрите, как вращается круг, и посмотрите, как вращается граница круга.

.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>