How to make rotation animation (CSS3) the same in Chrome and Firefox?

Question

css

Here's an example: jsfiddle.net/kityan/3LGYZ Rotation
angles: 0 -100 400.
Firefox and IE behave the same: rotate counterclockwise by -100 and then to position 40 clockwise.
Even though 400 includes a full turn, it doesn't.
Chrome makes a full turn as it should!
The difference, apparently, is in two things: from what position they consider the transformation matrix - this is in relation to the transformation itself. And also in the animation itself - whether to take full turns into account during rotation or not ... Or is it just animation?
Is it somehow possible to bring it to a cross-browser view using CSS3?
PS And a follow-up question: why can't the animation be applied without reloading the second time?

Answer 1

Remove scale(0.5) from the line.
It is necessary to write down either separated by a comma or put on a new line

Answer 2

Google OnePage or FullPage - JavaScript plugins.
UPD: I noticed an interesting thing - from tablets on Windows, the wrong one, the wrong one does not show signs of life.
UPD2: But Scrollify works.

Answer 3

alvarotrigo.com/fullPage

Answer 4

If everything is non-standard - Scrollify can help