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

[Puzzle]

Nexus,
Скажите пожалуйста, а могли бы вы ещё помочь с тем чтобы эта картинка cover.png и была самой кнопкой Play ?
А то я вот всё вожусь с того момента как вы написали, но что-то не смог так сделать(

[Nexus]

Puzzle, элемент с классом:
js-rotatable-image - вращаемый элемент;
js-play-button - элемент, при нажатии на который вращение начнется/продолжится;
js-pause-button - элемент, при нажатии на который вращение прекратится.

На странице может быть только 1 элемент с перечисленными классами (если будет несколько, то браться будет первый попавшийся).

чтобы эта картинка cover.png и была самой кнопкой Play

Добавьте изображению еще и класс js-play-button

как уменьшить скорость анимации

Уменьшите значение константы degreePerCall (строка 33 в моем коде).

[Malleys]

Вот идея с одной кнопкой включения/выключения и вращением диска-картинки...

<button class="radio-controls-play-button"></button>

<script>

document.addEventListener("click", event =>{
	if(event.target.matches(".radio-controls-play-button"))
		event.target.classList.toggle("play");
});

</script>

<style>

.radio-controls-play-button {
	position: relative;
	padding: 1em;
}

.radio-controls-play-button::before {
	content: "";
	background: url(https://is3-ssl.mzstatic.com/image/thumb/Purple118/v4/0c/f5/f4/0cf5f426-a35d-b047-b383-09a4f5e428d6/AppIcon-1x_U007emarketing-85-220-8.png/246x0w.jpg) center / cover;
	width: 10em;
	height: 10em;
	border-radius: 100%;
	display: block;
	animation: 5s rotate linear infinite;
	animation-play-state: paused;
}

.radio-controls-play-button.play::before {
	animation-play-state: running;
}

.radio-controls-play-button::after {
	content: "▶\fe0f";
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: xx-large;
	transform: translate(-50%, -50%);
}
	
.radio-controls-play-button.play::after {
	content: "⏸\fe0f";
}

@keyframes rotate {
	to {
		transform: rotate(1turn);
	}
}

</style>