SVG-анимация поворота пути
Я пытаюсь заставить часть моего SVG вращаться, но мне кажется, что он вращается вокруг очень большой исходной точки, что сбивает с толку, потому что фактический путь невероятно мал.
Вот моя анимация элемента пути css:
.wing1 {
transform-origin: bottom right;
animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
@keyframes spin {
50% { transform: rotate(45deg); }
100% { transform: rotate(0deg); }
}
}
Вот JSFiddle (с включенным SVG): http://jsfiddle.net/c5g3sq4e/
Я пытаюсь заставить элемент крыла вращаться вокруг правого нижнего угла, чтобы он выглядел так, как будто он летит, но я никогда не выполнял вращение элемента SVG, поэтому я не уверен, что правильно указал начало координат.
Ответы 1
Вам необходимо добавить transform-box: fill-box;. Это заставит ограничивающую рамку объекта использовать как контрольную рамку.
.wing1 {
transform-origin: bottom right;
transform-box: fill-box;
animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
@keyframes spin {
50% { transform: rotate(45deg); }
100% { transform: rotate(0deg); }
}
}
transform-box - недавняя вещь, используемая для исправления еще одной недавней вещи. Эта ручка: codepen.io/mandymichael/details/LEpywo (как комментарий автора) лучше всего работала в Chrome. Не больше. Еще в 2014-2015 годах ручка работала без transform-box. Теперь вам понадобится transform-box, чтобы он работал правильно.
Не совсем. Это поведение Chrome было ошибкой. Что они сейчас исправили. transform-box был добавлен для обеспечения гибкости в интерпретации transform-origin. Теперь ваше исправление будет работать в большинстве браузеров. Но он не будет работать в Firefox год назад - с transform-box или без него. Мое предложение будет работать во всех версиях Chrome и Firefox.
transform-boxпоявился недавно. Если вы хотите быть совместимыми со старыми версиями браузеров, рассмотрите возможность использования вместо них абсолютных координат. Например.transform-origin: 736px -124px;