Одушевленное вращение объекта в JavaScript ⇐ CSS

[Anonymous]

Я хочу оживить ротацию элемента (в моей демонстрации здесь это X, так как я не мог загрузить картинку со своим фрагментом кода). Проблема, с которой я сталкиваюсь, заключается в том, что вращение всегда вне центра.

Код: Выделить всё

function spinWheel() {

const wheel = document.getElementById('wheelContainer');

wheel.style.transition = 'transform 4s ease-out';
wheel.style.transform = `rotate(${1080}deg)`;

setTimeout(() => {
// Reset transition for next spin and fix wheel rotation angle to normalized angle
wheel.style.transition = 'none';
wheel.style.transform = `rotate(${0}deg)`;
}, 4000);
}< /code>
h1 {
text-align: center;
}

.wheel-container {
margin: 0 auto;
width: 800px;
height: 800px;
display: flex;
justify-content: center;
align-items: center;

font-size: 200px;
font-weight: bold;
color: #ccc;

border: 5px solid #999;  /* Circle border */
border-radius: 50%;

transition: transform 4s cubic-bezier(0.23, 1, 0.32, 1);
}< /code>




Spin



Spin

x

Насколько я понял, дисплей: Flex дает мне возможность выравниваться в центр, но я не могу получить объект/изображение/все, что я хочу повернуть в реальной точке.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... javascript