css3 rotate transition, doesn't take shortest way

Question

I want to use a css3 transition to smooth a compass movement using phonegap. i calculate the desired rotation as angle from 0 to 359.

The problem is, when it should go from for example 359 to 0 it doesn't turn 1 degree clockwise, but instead it turns 359 degree counter clockwise.

Is there a way to tell css to always take the shortest way for a rotation?

Answer 1

The transform is doing exactly what you tell it to.

It starts at 359deg and goes to 1deg. You are looking to 'rollover' 360deg back to 1deg, which is really 361deg. The way the transform transitions work is that it interpolates between values.

The solution to your problem is to make a counter variable that holds the degrees of rotation:

var rot = 0;  // lets start at zero, you can apply whatever later

To apply a rotation, change value:

rot = 359;
// note the extra brackets to ensure the expression is evaluated before
//   the string is assigned this is require in some browsers
element.style.transform = ("rotate( " + rot + "deg )");

so if you do this:

rot = 1;
element.style.transform = ("rotate( " + rot + "deg )");

it goes back. So you need to see if it is closer to 360 or 0 regardless how many rotations it has been through. You do this by checking the value of element.style.transform which is just the current rot value and then comparing to the new rot value. However, you need to do this with respect to how many rotations may exist, so:

var apparentRot = rot % 360;

Now no matter how many spins it has had, you know how far around it is, negative values are equal to the value + 360:

if ( apparentRot < 0 ) { apparentRot += 360; } 

Now you have normalized any negative values and can ask whether a positive rotation (through 360deg in your case) or negative is needed. Since you seem to be giving the new rotation value as 0-360deg, this simplifies your problem. You can ask if the new rotation + 360 is closer to the old value than the new rotation itself:

var aR,          // what the current rotation appears to be (apparentRot shortened)
    nR,          // the new rotation desired (newRot)
    rot;         // what the current rotation is and thus the 'counter'

// there are two interesting events where you have to rotate through 0/360
//   the first is when the original rotation is less than 180 and the new one
//   is greater than 180deg larger, then we go through the apparent 0 to 359...
if ( aR < 180 && (nR > (aR + 180)) ) {
    // rotate back
    rot -= 360;
} 

//   the second case is when the original rotation is over 180deg and the new
//   rotation is less than 180deg smaller
if ( aR >= 180 && (nR <= (aR - 180)) ) {
    // rotate forward
    rot += 360;
}

Other than this, simply adding the value of the new rotation to rot is all that is needed:

rot += (nR - aR); //  if the apparent rotation is bigger, then the difference is
                  //  'negatively' added to the counter, so the counter is
                  //  correctly kept, same for nR being larger, the difference is
                  //  added to the counter

Clean it up a bit:

var el, rot;

function rotateThis(element, nR) {
    var aR;
    rot = rot || 0; // if rot undefined or 0, make 0, else rot
    aR = rot % 360;
    if ( aR < 0 ) { aR += 360; }
    if ( aR < 180 && (nR > (aR + 180)) ) { rot -= 360; }
    if ( aR >= 180 && (nR <= (aR - 180)) ) { rot += 360; }
    rot += (nR - aR);
    element.style.transform = ("rotate( " + rot + "deg )");
}

// this is how to intialize  and apply 0
el = document.getElementById("elementYouWantToUse");
rotateThis(el, 0);

// now call function
rotateThis(el, 359);
rotateThis(el, 1);

The counter can go positive or negative, it doesn't matter, just use a value between 0-359 for the new rotation.