Вращение элемента по кругу на javascript

Суть в следующем. У нас имеется div, с position:relative и допустим span с position:absolute, который нам надо пустить по кругу

В моем случае надо было пустить по тарелочке яблочко.

Сначала определяемся с нашими входными данными. Нам нужен радиус и центр нашей окружности. Его получить просто, просто делим пополам ширину и высоту нашего div, где будет вращаться наш элемент.

var radius = 60;	
	
var x_0 = 78;
var y_0 = 78;

Мы получили координаты центра нашей окружность. Пусть также у нас будет стартовый угол в 0 градусов, впишем и его: var deg = 0;

Затем с полученными данными получим координаты x и y нашей будущей точки.

var x = x_0 + radius*Math.cos(deg);
var y = x_0 + radius*Math.sin(deg);

С полученными значениями уже можно работать, но лучше будет у полученных значений отнять половину ширины и высоты элемента. Можете высчитывать, можете просто вручную вписать нужные значения

x = x - 26;
y = y - 26;

И все что остается, прописать новые значения нашему элементу:

var apple = $('#lk_bonus_header .balans .apple');

apple.css('left', x);
apple.css('top', y);

Оформляем полученный результат в готовую функцию.

function rotate_apple(deg = 0){
	
	var radius = 60;	
	
	var x_0 = 78;
	var y_0 = 78;
	
	var x = x_0 + radius*Math.cos(deg);
	var y = x_0 + radius*Math.sin(deg);
	
	var apple = $('#lk_bonus_header .balans .apple');
	
	x = x - 26;
	y = y - 26;
	
	apple.css('left', x);
	apple.css('top', y);	
}

И все, что остается, использовать ее в setInterval

var deg = 0;

var animate_apple_rotate = setInterval(function(){
	
	deg = deg + 0.1;
	
	if( deg == 360 ) deg = 0;
	
	rotate_apple(deg);
}, 50);