maplol123@gmail.com,
формула угла поворота по ссылке ниже
https://vk-book.ru/poluchenie-ugla-n...mi-javascript/
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.back{
width: 20%;
transition:all 0.5s ease;
z-index: 0;
border-radius: 100%;
}
.rotate {
width: 30%;
animation: rotate 2s linear infinite normal;
}
@keyframes rotate{
from {
transform: rotate(var(--palatte-padding-left));
}
}
div{
user-select: none;
}
.rasp{
top: 50px;
left: 40px;
pointer-events:none;
z-index: 999;
}
.anim{
position: absolute;
margin: 5%;
}
:root {
--palatte-padding-left: 360deg;
}
</style>
</head>
<body>
<div class="anim"><img draggable="false" src="https://png2.kisspng.com/sh/b4c2c128c6ea74b7569a5321626f4ed9/L0KzQYm3VsA1N6pujZH0aYP2gLBuTgdqdJ0yi99ydHiwc73wkL1ieqUyguQ2c33shLm0VfIyPJQ7fKsDMEW1Roi1UMU1OGM7T6Q6NUK7QImBUsgyPWM6TpD5bne=/kisspng-will-smith-clip-art-jr-smith-5b14c6d9805267.0540267215280882815256.png" alt="smith" id="Canv" class="back">
</div>
<div class="increment"><p id="out">0</p></div>
<script>
var click = 0,
timer;
function getDegreeElementById(id_element) {
var element = document.getElementById(id_element);
var style = window.getComputedStyle(element, null);
var valueStyle = style.getPropertyValue("transform");
if (valueStyle == "none") return 0;
var values = valueStyle.split("(")[1];
values = values.split(")")[0];
values = values.split(",");
var cos = values[0];
var sin = values[1];
var degree = Math.round(Math.asin(sin) * (180 / Math.PI));
if (cos < 0) {
addDegree = 90 - Math.round(Math.asin(sin) * (180 / Math.PI));
degree = 90 + addDegree
}
if (degree < 0) degree = 360 + degree;
return degree
}
Canv.onmouseup = function() {
this.classList.remove("rotate");
cancelAnimationFrame(timer)
};
var img = document.querySelector("img");
img.addEventListener("mousedown", function() {
Canv.classList.add("rotate");
var old = 360;
function increment() {
var c = getDegreeElementById("Canv") || 360;
if (c > old) {
click++;
old = 360;
document.getElementById("out").innerHTML = click
}
old = c;
timer = requestAnimationFrame(increment)
}
timer = requestAnimationFrame(increment)
});
</script>
</body>
</html>
