Задать вопрос
light2041
@light2041
web-разработчик
javascript

Про transform: rotate(). Как правильно крутить?

Добрый день! Вопрос у меня по фронтенду.

Есть районная система отслеживания транспорта. И там для иконок автобусов используется поворот, чтобы обозначить направление его движения.

Ранее поворот реализовался на JS вот так: 
$(marker._icon)[0].style.transform = $(marker._icon)[0].style.transform + " rotate("+pos.v.c+"deg)";


Т.е. применялось свойство CSS3 transform: rotate(Ndeg);

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

Я добавил такой код:
$(marker._icon)[0].style.transform = $(marker._icon)[0].style.transform + " rotate("+pos.v.c+"deg)";
$(marker._icon)[0].style['-webkit-transform'] = $(marker._icon)[0].style['-webkit-transform'] + " rotate("+pos.v.c+"deg)";
$(marker._icon)[0].style['-ms-transform'] = $(marker._icon)[0].style['-ms-transform'] + " rotate("+pos.v.c+"deg)";
$(marker._icon)[0].style['-moz-transform'] = $(marker._icon)[0].style['-moz-transform'] + " rotate("+pos.v.c+"deg)";


Т.е. добавил еще вендорных префиксов, чтобы улучшить поддержку поворота.

Все стало хорошо в браузерах, но в Chromium 52.0 (Ubuntu 16.04) свойство задвоилось, т.е. к иконкам начала (успешно) применяться конструкция вида transform: rotate(67deg) rotate(67deg); Угол поворота рассчитывался в 2 раза больший и иконки смотрели не туда.

Когда я убрал 
$(marker._icon)[0].style.transform = $(marker._icon)[0].style.transform + " rotate("+pos.v.c+"deg)";
и оставил только вендорные префиксы, в Хромиуме все восстановилось, однако полностью игнорировать поворот стала Mozilla (кроме "ночных" сборок).

В итоге, я не могу понять, что делать. Если я не указываю чистый rotate без префиксов, то теряю Mozilla и, может, что-то еще. Если указываю - теряю Хромиум (и Хром для Андроида), т.к. там углы двоятся. Вообще, почему они двоятся? Я крайне удивлен такому поведению...
  • Вопрос задан
  • 1071 просмотр
13 комментариев
Подписаться 1 Оценить 13 комментариев
Пригласить эксперта
Ответы на вопрос 1
@dmz9
1. лучше сделать добавление-удаление класса, вместо накручивания инлайн-стилей.
в цсс проще пихать вендорные префиксы. а у элемента будет меняться класс, добавляющий ему вращение через цсс.
2. https://github.com/Modernizr/Modernizr/wiki/HTML5-... -> imsky.github.io/cssFx
полифилл это скрипт поддержки (js) который поможет тем браузерам где нет реализации каких то вещей.
3. если нужны кастомные повороты то тут вот что
3.1 теоретически через несколько тысячелетий появится поддержка attr() внутри любого цсс свойства. пока что поддерживается только content: attr(какой-то-атрибут), т.е. псевдоэлемент. вобщем, когда то можно будет заюзать что то вроде
<div ang="10"></div>
div{
  transform:rotate(attr(ang, deg));
}

но пока увы это не работает. скрипт менял бы только атрибут ang и все.
3.2 раз уж там что то у тебя похожее на джиквери то вот
www.richardfawcett.net/demos/jquery_1.8.0_testing.html
после 1.8 джиквери сам добавляет вендорные префиксы.
однако чтобы это юзать надо использовать не выборку дом-элемента, а именно джиквери объект
var angle=12.5;
$(marker._icon).css({
  transform:"rotate("+angle+"deg)"
})

джиквери сам проставит префиксы. и да, .css метод на джиквери объекте, вместо style на дом-элементе.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Аудит и поддержка проекта внедрению виртуальной архитектуры (АСУ ТП)
25 нояб. 2024, в 03:04
500000 руб./за проект
Сделать простой лендинг
25 нояб. 2024, в 02:45
2000 руб./за проект
Изображения на главную страницу в стиле Jetton и 1вин
25 нояб. 2024, в 00:22
12000 руб./за проект
Ещё заказы