vetero4eg
@vetero4eg
Frontend

Почему не срабатывает transform-origin в IE и Edge?

Не могу понять в чем дело... По caniuse поддержка есть, префикс для гарантии указан, но свойство не работает в указанных браузерах.

Есть вот такая вот анимация vetero4eg.github.io/Demo/prorok.html

для точек нужный центр указан..
-webkit-transform-origin: 131px 77px;
-ms-transform-origin: 131px 77px;
transform-origin: 131px 77px;

что не так?

пыталась задавать transformOrigin через TweenMax но тогда не работает вообще везде...
указывала так TweenMax.set('.dot', {transformOrigin: "131px 77px"});
  • Вопрос задан
  • 319 просмотров
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
По caniuse поддержка есть

Ну вообще-то не совсем, там есть сноска №1, где говорится, что IE и Edge "Does not support CSS transforms on SVG elements".

для точек нужный центр указан..

Уберите его из CSS и используйте матрицу вместо scale:
TweenLite.from("...", 1.5, { transform: "matrix(0, 0, 0, 0, 131, 77)" });
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08 Куратор тега CSS
Потому что надо делать на canvas, а не выворачивать себе мозги, пытаясь сделать на svg и css. В IE и Edge плохая поддержка svg, и для SVG не работает transform-origin. Смирись и ищи обходной путь. Хоть каждую точку по отдельности аниммируй.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы