Не уверен, то ли это вообще, что нужно, но у меня без выводы значения, если нужно с ними, то это уже ютуб, наверное
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic" rel="stylesheet" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
</head>
<body>
<div class="block">
<img src="triangle.svg" alt="" style="position: absolute; width: 40px; height: 40px; z-index: 2;transform: rotate(180deg);opacity: 0.9; ">
<img src="wheel.png" alt="" class="wheel">
</div>
<div style="display: flex; width: 100%; justify-content: center;">
<p style=" position: absolute; border-radius: 40px; filter: drop-shadow(1px 0px 3px aqua); z-index: 20; margin-top: 30px; font-family: Montserrat; padding: 14px 25px 14px 25px;user-select: none; background-color: aqua;" class="btn">Крутить</p></div>
</body>
<style>
.block{
width: 100%; height: 100%; display: flex; justify-content: center; margin-top: 100px;
}
.wheel{
filter: brightness(106%); transform: rotate(366.6deg);
transition-duration: 3s;
transition-timing-function: cubic-bezier(.36,.48,0,1);
}
</style><!--rotate(26deg) rotate(52.5deg) rotate(81deg) rotate(110deg) rotate(133.4deg) rotate(163deg) rotate(193deg) rotate(218deg) rotate(244deg) rotate(266deg)
rotate(291.8deg) rotate(320deg) rotate(346.4deg) rotate(366.6deg)-->
<script>
let wheel = document.querySelector('.wheel')
let btn = document.querySelector('.btn')
btn.onclick = function(){
let rotate_item = Math.floor(Math.random()*366.6)
wheel.style.transform = "rotate(" + rotate_item + "deg)"
}
</script>
</html>
не забудьте загрузить фото, и скачайте стрелочку здесь:
https://svgshare.com/s/nGw (Хабр не может загрузить svg картинки)
Средний
Простой