Вращение объекта вокруг указанной оси
Объект можно вращать через CSS-свойство transform: rotate()
. Но объект вращается на месте, как показано на примере ниже (синий объект вращается на месте).
Через CSS-свойство transform-origin
можно указать точку координат, вокруг которой будет вращаться объект.
/* создание анимации «moving» */ @keyframes moving { 100% {transform: rotate(-360deg);} } .element { /* задать анимацию «moving» к текущему элементу */ animation: moving 3s infinite linear; /* указать точку координат, вокруг которой будет вращаться объект */ transform-origin: -80px -80px; }
Результат:
Поддержать автора