Javascript-форум - Как сделать подсчет оборотов в js из css?

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>