Style.transform JAvascript DOM property not working

i am new to JS and i am building Star which rotates clockwise while going left to right than it go 20 px down than again will move towards right to left rotating anti-clockwise now to rotate i am using transform property in JavaScript but it just printing string "rotate(20Deg)" literally, it is not rotating or showing any errors while performing debugging. Here is my code please do take a look.

Also i am cool with this animation in CSS, but problem with CSS is i can not manipulate rotation in CSS. In javascript nor i can have another class replace first one, if you know how to do it please take a look

window.topPos = '';

var e = document.getElementById("aDiv");
//var e1 = document.getElementById("aDiv1");
var s = 1;

function myInterval() {
  var eLeftPos = e.offsetLeft;
  //console.log(e.offsetLeft);
  e.style.left = (eLeftPos + s) + 'px';
  //console.log(e.style.left);
  
  function myfunction() { //This one i am talking abot
    console.log('hello')
    e.style.transform = "rotate(30deg)";
  }

  myfunction()

  var leftPos = (eLeftPos + s) >= 300

  if (leftPos) {
    function myInterval1() {
      var eTopPos = e.offsetTop;
      //console.log(e.offsetLeft);
      e.style.top = (eTopPos + s) + 'px';


      //console.log(e.style.top);
      var topPos = (eTopPos + s) >= 100

      if ((eTopPos + s) >= 100) {
        clearInterval(internal1)
      }

      if (topPos) {
        function myInterval2() {
          var eRightPos = e.offsetLeft;
          //console.log(eRightPos)
          e.style.left = (eRightPos - 9) + 'px'
          var rightPos = (eRightPos - 9) < 20
          if (rightPos) {
            clearInterval(interal2)
          }
          if (rightPos) {
            function myInterval3() {
              var eTopPos = e.offsetTop;
              //console.log(eTopPos);
              e.style.top = (eTopPos - 5) + 'px';
              var downPos = (eTopPos - 5) > 150

              if (downPos) {
                clearInterval(internal3)
              }

              if (downPos) {
                function myInterval4() {
                  var eLeftPos1 = e.offsetLeft;
                  //console.log(e.offsetLeft);
                  e.style.left = (eLeftPos1 + s) + 'px';
                  //console.log(e.style.left);

                  var leftPos1 = (eLeftPos1 + s) > 300

                  if (leftPos1) {
                    clearInterval(internal4)
                  }
                }
                var internal4 = setInterval(myInterval4, 100)
              }
            }
            var internal3 = setInterval(myInterval3, 100)
          }
        }
        var interal2 = setInterval(myInterval2, 10)
      }
    }
    var internal1 = setInterval(myInterval1, 100);
  }

  if ((eLeftPos + s) >= 300) {
    clearInterval(internal)
  }
}

var internal = setInterval(myInterval, 100);

/*var myInterval2 = setInterval(function(){
  var eTopPos = e.offsetTop;
  console.log(e.offsetTop);
  e.style.left = (eTopPos + s) + 'px';
    
}, 100);*!/*/
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

#aDiv {
  animation: 2s rotate infinite;
  animation-timing-function: linear;
}

#aDiv {
  background: black;
  width: 200px;
  height: 80px;
  position: relative;
}

#aDiv:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 80px;
  background: black;
}
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
</head>

<body>
  <!--<div id="aDiv1"></div>-->
  <div id="aDiv"></div>
  <button>Stop</button>
</body>

</html>



Read more here: https://stackoverflow.com/questions/68491713/style-transform-javascript-dom-property-not-working

Content Attribution

This content was originally published by Cheems at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: