Take a look at this example: https://jsfiddle.net/s2Lngpto/1/
I'm working on a spinner animation that I want to spin 315 degrees (and complete a full cycle in 8 rotations), but I'm finding CSS behavior to be quite peculiar. When specifying rotate(315deg)
, I expected it to move to a position -45 degrees from the current one. However, instead of taking the shortest path, it rotates through the longest path to the right. It seems like positive integers rotate right and negative integers rotate left, but then when I set it to 270 degrees, it rotates left on the second stage rather than right.
Am I missing something here? What's the simplest way to get the desired rotation?