Currently, I am retrieving rotation data from a sensor and transmitting it to a webpage containing a 2D-Model that rotates based on this data. To ensure a smoother motion, I have incorporated a CSS transition.
However, an issue arises when the rotation data shifts from, for example, 1° to 359°. The transition causes the object to rotate in the opposite direction to reach 359° instead of taking the shortest path. How can I rectify this?
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°</button>
<button id="button2">Go to 1°</button>
<br/>
<div id="object">UP</div>