How to determine direction of rotation in CSS3 transitions?
0 .. 180 is clockwise, 0 .. -180 is counterclockwise. So, positive number rotates clockwise, negative - other way around. You can also keep increasing/decreasing the number to continue rotation, the browser will remove additional 360s.
I created an example of how to rotate:
<html>
<style type="text/css">
.rotatedDiv {
margin-top: 200px;
margin-left: 200px;
-webkit-transition: -webkit-transform 3s ease-in;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
}
</style>
<body>
<div class="rotatedDiv" onclick="this.style.webkitTransform='rotate(-100deg)'">
This div will do a spin when clicked!
</div>
</body>
</html>
First we display rotated div. When you click on it, it will rotate. Depending on the value - negative or positive it will rotate counter-clockwise or clockwise.
It seems that you also need to remember to put in the "from" initial concrete values, otherwise the +/- direction sign won't behave well.