Problems calculating rotation degrees

Question

Got some math issues in my code that i can't figure out.

When you press on one of the red circles it should take the closest path (left or right) and rotate down to the bottom, it's kinda working, but there are a few issues with it.

eg If you start by pressing '8' and then '3', the container is only rotating 45 degrees in the wrong direction.

And the second issue is that the numbers are spinning around when the wheel is rotating.

Here is a jsfiddle to the code: https://jsfiddle.net/she4x2w6/10/

$('.item').click(function() {
var currentId = $('#container').data('id');
var nextId = $(this).data('id');
var currentRotation = (360 / items.length) * currentId - (360 / items.length);
var nextRotation = (360 / items.length) * nextId - (360 / items.length);
var deg;

if (currentRotation - nextRotation > 180 || nextRotation - currentRotation > 180) {
    deg = nextRotation > 180 ? 360 - nextRotation : nextRotation - 360;
} else {
    deg = -Math.abs(nextRotation);
}
var itemDeg = nextRotation <= 180 ? nextRotation : -Math.abs(360 - nextRotation);

$('#container').css({
    transition: 'transform 0.6s',
    transform: 'rotate(' + deg + 'deg)'
})

$('.item').css({
    transition: 'transform 0.6s',
    transform: 'rotate(' + itemDeg + 'deg)'
})

Answer 1

CSS rotate() function rotates an element to given angle while you are trying to rotate your element by a given angle.

rotate() -CSS | MDN

I had to change some of your approach to get it working:

 var radius = 100; // adjust to move out items in and out var items = $('.item'), container = $('#container'), width = container.width(), height = container.height(); var angle = 0, step = (2 * Math.PI) / items.length, angle = Math.PI/2; items.each(function() { var x = Math.round(width / 2 + radius * Math.cos(angle) - $(this).width() / 2); var y = Math.round(height / 2 + radius * Math.sin(angle) - $(this).height() / 2); $(this).css({ left: x + 'px', top: y + 'px' }); angle += step; }); $('#container').data('deg', 0); $('.item').click(function() { var currentId = $('#container').data('id'); var nextId = $(this).data('id'); var currentDeg =$('#container').data('deg'); var deg; var degg = ((nextId+items.length-1)%items.length)*(360 / items.length); if (degg>=180) { deg = 360-degg; } else { deg = -degg; } var t = (currentDeg - deg) % 360; if (t<0) { t = 360+t; } if (t<180) { deg = currentDeg-t; } else { deg = currentDeg+360-t; } var itemDeg = -deg; var time = Math.abs(deg-currentDeg)/100; $('#container').css({ transition: 'transform ' + time + 's', transform: 'rotate(' + deg + 'deg)' }) $('.item').css({ transition: 'transform ' + time + 's', transform: 'rotate(' + itemDeg + 'deg)' }) $('#container').data('id', nextId).data('deg', deg); }); 

 body { padding: 2em; } #container { width: 200px; height: 200px; margin: 10px auto; border: 1px solid #000; position: relative; border-radius: 50%; } .item { width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; position: absolute; background: #f00; } .item p { margin: 0; } .active .item-content { opacity: 1 !important; transition: opacity ease 0.6s; } .item .item-content { opacity: 0; transition: opacity ease 0.3s; margin: auto; position: absolute; width: 230px; transform: translate(-50%); left: 50%; pointer-events: none; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container" data-id="1"> <div data-id="1" class="item">1</div> <div data-id="2" class="item">2</div> <div data-id="3" class="item">3</div> <div data-id="4" class="item">4</div> <div data-id="5" class="item">5</div> <div data-id="6" class="item">6</div> <div data-id="7" class="item">7</div> <div data-id="8" class="item">8</div> <div data-id="9" class="item">9</div> </div>