About transform: rotate(). How to spin?

Question

JavaScript

Good afternoon! I have a question about the frontend.
There is a regional vehicle tracking system. And there, for the bus icons, rotation is used to indicate the direction of its movement.
Previously, the rotation was implemented in JS like this:

$(marker._icon)[0].style.transform = $(marker._icon)[0].style.transform + " rotate("+pos.v.c+"deg)";

Those. the CSS3 transform property was applied: rotate(Ndeg);
This caused problems in browsers that do not support CSS3: the icons simply did not rotate, which is logical.
I added this code:

$(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)";

Those. added more vendor prefixes to improve rotation support.
Everything became fine in browsers, but in Chromium 52.0 (Ubuntu 16.04) the property was doubled, i.e. the icons began to (successfully) apply the construction of the form transform: rotate(67deg) rotate(67deg); The rotation angle was calculated 2 times larger and the icons looked in the wrong direction.
When I removed

$(marker._icon)[0].style.transform = $(marker._icon)[0].style.transform + " rotate("+pos.v.c+"deg)";

and left only vendor prefixes, everything was restored in Chromium, but Mozilla began to completely ignore the turn (except for "nightly" builds).
In the end, I can't figure out what to do. If I don't specify a pure rotate without prefixes, then I lose Mozilla and maybe something else. If I specify, I lose Chromium (and Chrome for Android), because. there are double angles. In general, why do they double? I'm very surprised by this behavior...

Answer 1

1. It's better to add/remove a class instead of winding up inline styles.
in tss it is easier to shove vendor prefixes. and the element will change the class that adds rotation to it through css.
2. https://github.com/Modernizr/Modernizr/wiki/HTML5-... -> imsky.github.io/cssFx
polyfill is a support script (js) that will help those browsers where there is no implementation of some things.
3. if you need custom rotations, then here's what
3.1 theoretically, in a few millennia, attr () support will appear inside any css property. so far only content: attr(some-attribute) is supported, i.e. pseudo element. in general, when it will be possible to use something like

div{
  transform:rotate(attr(ang, deg));
}

but so far it doesn't work. the script would change only the ang attribute and that's it.
3.2 since there is something similar to jquery, then here
www.richardfawcett.net/demos/jquery_1.8.0_testing.html
after 1.8, jquery itself adds vendor prefixes.
however, in order to use this, it is necessary to use not the selection of the house-element, but the jQuery object

var angle=12.5;
$(marker._icon).css({
  transform:"rotate("+angle+"deg)"
})

Jiquery will put down the prefixes himself. and yes, the .css method is on the jQuery object, instead of the style on the home element.