How can i accomplish a rotation-transition between 1° and 359° in HTML/CSS with JS

Question

I'm reading rotation data from a sensor and sending it to a webpage where i have a 2D-Model, which rotates according to the data. I've added a css-transition to smooth out the otherwise shaky movement.

The problem is that if the rotation data goes from eg 1° rotation to 359° the transition makes the object rotate one round the opposite way to achieve 359° instead of taking the shortest way. How can i change that?

 document.getElementById('button1').onclick = function() { var div = document.getElementById('object'), deg = 359; div.style.webkitTransform = 'rotate(' + deg + 'deg)'; div.style.mozTransform = 'rotate(' + deg + 'deg)'; div.style.msTransform = 'rotate(' + deg + 'deg)'; div.style.oTransform = 'rotate(' + deg + 'deg)'; div.style.transform = 'rotate(' + deg + 'deg)'; } document.getElementById('button2').onclick = function() { var div = document.getElementById('object'), deg = 1; div.style.webkitTransform = 'rotate(' + deg + 'deg)'; div.style.mozTransform = 'rotate(' + deg + 'deg)'; div.style.msTransform = 'rotate(' + deg + 'deg)'; div.style.oTransform = 'rotate(' + deg + 'deg)'; div.style.transform = 'rotate(' + deg + 'deg)'; }

 #object { -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; text-align: center; color: white; height: 100px; width: 80px; margin: 30px; background: green; }

 <button id="button1">Go to 359&#176;</button> <button id="button2">Go to 1&#176;</button> <br/> <div id="object">UP</div>

Answer 1

Rotating to -1 will get you there.

 document.getElementById('button1').onclick = function() { var div = document.getElementById('object'), deg = -1; div.style.webkitTransform = 'rotate(' + deg + 'deg)'; div.style.mozTransform = 'rotate(' + deg + 'deg)'; div.style.msTransform = 'rotate(' + deg + 'deg)'; div.style.oTransform = 'rotate(' + deg + 'deg)'; div.style.transform = 'rotate(' + deg + 'deg)'; } document.getElementById('button2').onclick = function() { var div = document.getElementById('object'), deg = 1; div.style.webkitTransform = 'rotate(' + deg + 'deg)'; div.style.mozTransform = 'rotate(' + deg + 'deg)'; div.style.msTransform = 'rotate(' + deg + 'deg)'; div.style.oTransform = 'rotate(' + deg + 'deg)'; div.style.transform = 'rotate(' + deg + 'deg)'; }

 #object { -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; text-align: center; color: white; height: 100px; width: 80px; margin: 30px; background: green; }

 <button id="button1">Go to 359&#176;</button> <button id="button2">Go to 1&#176;</button> <br/> <div id="object">UP</div>

So just use some smart calculations to know if you should pass a possitive or negative number...