Вращение объекта вокруг указанной оси

Объект можно вращать через CSS-свойство transform: rotate(). Но объект вращается на месте, как показано на примере ниже (синий объект вращается на месте).

Через CSS-свойство transform-origin можно указать точку координат, вокруг которой будет вращаться объект.

/* создание анимации «moving» */
@keyframes moving {
    100% {transform: rotate(-360deg);}
}


.element {
    /* задать анимацию «moving» к текущему элементу */
    animation: moving 3s infinite linear;

    /* указать точку координат, вокруг которой будет вращаться объект */
    transform-origin: -80px -80px;
}

Результат:

Комментарии

Авторизуйтесь, чтобы добавлять комментарии