SVG анимация, CSS спин анимация, но оставайтесь на том же месте - PullRequest
Новая
       6

SVG анимация, CSS спин анимация, но оставайтесь на том же месте

0 голосов
/ 10 ноября 2018

Я анимирую пропеллер на моем сайте.
http://bug.soulmates.company (см. Раздел 3)
Но хотя я установил стиль: 

.propeller_spin {
   animation-name: spin;
   animation-duration: 4000ms;
   animation-iteration-count: infinite;
   transform-origin: center center;
 }

 @keyframes spin {
   from {
     transform:rotate(0deg);
     transform-origin: center center;
   }
   to {
     transform:rotate(360deg);
     transform-origin: center center;
   }
 }

Пропеллер не вращается на месте при вращении.

1 Ответ

0 голосов
/ 10 ноября 2018

Элементы DOM измеряют источник преобразования из своего верхнего левого угла, но SVG измеряет источник преобразования относительно родительского холста SVG.

Вы можете использовать transform-box: fill-box в вашем классе .propeller_spin.

CSS-свойство transform-box определяет поле макета, к которому относятся свойства transform и origin-origin.

...