Вращение картинки по клику

[Puzzle]

Здравствуйте уважаемые умы. Помогите пожалуйста.Я создал онлайн радио, и на нём нужно сделать так, чтобы при нажатии на кнопку Play начинала крутиться картинка до тех пор, пока не нажмёшь на Pause и тогда картинка переставала крутиться. Буду очень вам благодарен.Ниже код

<div style="text-align: center;">  
<div class="radiocontainer"> 
<div class="radio-block" style="background: url('cover.png') no-repeat;"> 
<div id="jquery_jplayer_1" class="jp-jplayer"></div> 
<div id="jp_container_1" class="jp-audio-stream"> 
<div class="jp-type-single"> 
<div class="jp-gui jp-interface"> 
<ul class="jp-controls"> 
<li><a href="javascript:;" class="jp-play" tabindex="1">Play</a></li> 
<li><a href="javascript:;" class="jp-pause" tabindex="1">Pause</a></li> 
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">Mute</a></li> 
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">Unmute</a></li> 
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">Max volume</a></li> 
</ul> 
<div class="jp-volume-bar"> 
<div class="jp-volume-bar-value"></div> 
</div> 
<div class="jp-current-time"></div>
</div> 
</div> 
</div> 
</div> 
</div> 

</div>

Вращать надо вот эту картинку <div class="radio-block" style="background: url('cover.png') no-repeat;">

[ksa]

нужно сделать так, чтобы при нажатии на кнопку Play начинала крутиться картинка

Дык!

[Puzzle]

Дык!

Логично) Только я с JS совсем не дружу..И как это сделать не понятно..сколько примеров смотрел наяндексив, именно то что мне нужно не нашёл с примерами, везде либо по наведению, либо поворот на время и т.п. По этому написал здесь, думал тут помогут с кодом.

[ksa]

По этому написал здесь, думал тут помогут с кодом.

Ты хоть бы денежку какую предложил... Оно может быть и желающие нашлись бы.

У тебя машина есть?
Так вот автомеханики (и не только они) ничего бесплатно вообще не делают.
Что же ты нас так не уважаешь?

[ksa]

Представь такой диалог в автосервисе...
- Добрый день, что у вас с лучилось?
- Да вот машина барахлит... Сам я в этом не шарю... Т.ч. приехал к вам, думал вы ее отремонтируете.
- ???

[Puzzle]

Ты хоть бы денежку какую предложил... Оно может быть и желающие нашлись бы.

У тебя машина есть?
Так вот автомеханики (и не только они) ничего бесплатно вообще не делают.
Что же ты нас так не уважаешь?

У меня нет машины..это роскошь для меня. У меня з/п 11к рублей, ипотка,коммунальные,малень кий ребёнок, лишних денег нет. бЫли бы я бы вам и 100к $ дал..

P/s сто раз видел как тут людям бесплатно помогали. Для знающего делов 2мин. Как и писал выше, был бы богат деньгами, одарил бы без проблем. Буду ждать того кто поможет бесплатно, выхода нет.
Ну в край могу последние 100р со счёта телефона перевести.

[Nexus]

Вращать надо вот эту картинку <div class="radio-block" style="background: url('cover.png') no-repeat;">

Это не картинка, а блочный элемент.

Как вращать фоновое изображение лично я в душе не чаю.
Вижу только вариант с выделением этого изображения в отдельный элемент, который будет фоном для всего этого блока.

[Puzzle]

Это не картинка, а блочный элемент.

Как вращать фоновое изображение лично я в душе не чаю.
Вижу только вариант с выделением этого изображения в отдельный элемент, который будет фоном для всего этого блока.

Ну как бы не обязательно картинка в блоке..как у меня..это черновой вариант..можно сделать весь блок кнопкой плей..если поможет..даже не знаю как описать..просто нужен конечный эффект как я писал, при нажатии на кнопку крутится картинка (картинкой будет логотипа сайта, хотел картинку от песни, но не смог реализовать для потока)

[Nexus]

Попробуйте так (элемент с классом .radio-block__bg-image нужно сделать фоном всего блока):

<div style="text-align: center;">  
	<div class="radiocontainer"> 
		<div class="radio-block" style="background: url('cover.png') no-repeat;"> 
			
			<img src="cover.png" class="radio-block__bg-image js-rotatable-image"/>
			
			<div id="jquery_jplayer_1" class="jp-jplayer"></div> 
			<div id="jp_container_1" class="jp-audio-stream"> 
				<div class="jp-type-single"> 
					<div class="jp-gui jp-interface"> 
						<ul class="jp-controls"> 
							<li><a href="javascript:;" class="jp-play js-play-button" tabindex="1">Play</a></li> 
							<li><a href="javascript:;" class="jp-pause js-pause-button" tabindex="1">Pause</a></li> 
							<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">Mute</a></li> 
							<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">Unmute</a></li> 
							<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">Max volume</a></li> 
						</ul> 
						<div class="jp-volume-bar"> 
							<div class="jp-volume-bar-value"></div> 
						</div> 
						<div class="jp-current-time"></div>
					</div> 
				</div> 
			</div> 
		</div> 
	</div> 
</div>
<script>
(function(){
	const img=document.querySelector('.js-rotatable-image');
	const playButton=document.querySelector('.js-play-button');
	const cancelButton=document.querySelector('.js-pause-button');
	const degreePerCall=1;
	
	let isPlays=false;
	let curDegree=0;
	
	[playButton,cancelButton].forEach(function(node,i){
		node && node.addEventListener('click',function(){
			isPlays=!i;
		});
	});
	
	requestAnimationFrame(function rotate(){
		if(isPlays){
			curDegree=(curDegree+degreePerCall)%360;
			img.style.transform='rotate('+curDegree+'deg)';
		};
		
		requestAnimationFrame(rotate);
	});
})();
</script>

[Puzzle]

Попробуйте так

Огромное вам спасибо от души искренне.Всё заработало как надо.
Слава богу, что есть на свете ещё такие люди. Дай бог вам всего хорошего.