0
<!DOCTYPE html>
<html>
<head>
    <style>
        #Heading {
            position: absolute;
            user-select: none;
            font-family: 'Poppins', sans-serif;
            font-size: 100px;
            left: 35.8%;
        }

        #first {
            position: absolute;
            user-select: none;
            top: 26%;
            left: 24%;
            background-color: grey;
            padding: 10vh;
            border: 4px solid lightblue ;
        }

        #second {
            position: absolute;
            user-select: none;
            top: 26%;
            left: 40%;
            background-color: grey;
            padding: 10vh;
            border: 4px solid lightblue ;
        }

        #third {
            position: absolute;
            user-select: none;
            top: 26%;
            left: 56%;
            background-color: grey;
            padding: 10vh;
            border: 4px solid lightblue ;
        }

        #fourth {
            position: absolute;
            user-select: none;
            top: 49%;
            left: 56%;
            background-color: grey;
            padding: 10vh;
            border: 4px solid lightblue ;
        }

        #fifth {
            position: absolute;
            user-select: none;
            top: 49%;
            left: 40%;
            background-color: grey;
            padding: 10vh;
            border: 4px solid lightblue ;
        }

        #sixth {
            position: absolute;
            user-select: none;
            top: 49%;
            left: 24.1%;
            background-color: grey;
            padding: 10vh;
            border: 4px solid lightblue ;
        }

        #first:hover {
            background-color: aquamarine;
            border-color: aquamarine;
        }

        #second:hover {
            background-color: aquamarine;
            border-color: aquamarine;
        }

        #third:hover {
            background-color: aquamarine;
            border-color: aquamarine;
        }

        #fourth:hover {
            background-color: aquamarine;
            border-color: aquamarine;
        }
    
        #fifth:hover {
            background-color: aquamarine;
            border-color: aquamarine;
        }

        #sixth:hover {
            background-color: aquamarine;
            border-color: aquamarine;
        }

        .animate {
            animation-name: rotate;
            animation-duration: 2s;
        }

        @keyframes rotate {
            from { transform: rotateY(0deg); }
            to { transform: rotateY(180deg); }
        }
    </style>
</head>
<body>
    <span id="Heading">Memory</span>

    <div id="first" onclick="animate(event)"></div>

    <div id="second" onclick="animate(event)"></div>

    <div id="third" onclick="animate(event)"></div>

    <div id="fourth" onclick="animate(event)"></div>

    <div id="fifth" onclick="animate(event)"></div>

    <div id="sixth" onclick="animate(event)"></div>
    
    <script>
        let angle = 0;

        function animate(event) {
            let element = event.target;
            angle += 180;
            let start = null;

            function step(timestamp) {
                if (!start) start = timestamp;
                let progress = timestamp - start;
                let currentAngle = angle - 180 * (1 - progress / 2000);
                element.style.transform = `rotateY(${currentAngle}deg)`;
                if (progress < 2000) {
                    requestAnimationFrame(step);
                }
            }

            requestAnimationFrame(step);
        }
    </script>
</body>
</html>

I tried to make an Animation, where the div element turns 360 degrees, but everytime i try it, there is no Animation visible. I already tried to make a code in css. I also tried another Browser and restarting the Computer but it didnt work out. I already asked some AIs but they couldnt tell me wheres the Problem.

midnight-coding
  • 2,857
  • 2
  • 17
  • 27
Leqit
  • 1
  • What debugging have you tried? You can use your browser devtools inspect facility and add some console.log calls in your JS to see what happens when you enter the animate function. Actually you are not entering it because animate is already defined (built in to JS). Try renaming it eg to myanimate. – A Haworth Jul 27 '23 at 05:56

1 Answers1

1

In this code the function you defined with the name animate is not getting called from the div tags.

There might be few reasons behind the onclick function is not getting called and you may find them here : a stackoverflow answer

Also, for now you can try with the event listeners which can be understood as follows,

<!DOCTYPE html>
<html>
  <head>
    <style>
      #Heading {
        position: absolute;
        user-select: none;
        font-family: "Poppins", sans-serif;
        font-size: 100px;
        left: 35.8%;
        text-align: center;
      }
      #first {
        position: absolute;
        user-select: none;
        top: 26%;
        left: 24%;
        background-color: grey;
        padding: 10vh;
        border: 4px solid lightblue;
      }

      #second {
        position: absolute;
        user-select: none;
        top: 26%;
        left: 40%;
        background-color: grey;
        padding: 10vh;
        border: 4px solid lightblue;
      }

      #third {
        position: absolute;
        user-select: none;
        top: 26%;
        left: 56%;
        background-color: grey;
        padding: 10vh;
        border: 4px solid lightblue;
      }

      #fourth {
        position: absolute;
        user-select: none;
        top: 49%;
        left: 56%;
        background-color: grey;
        padding: 10vh;
        border: 4px solid lightblue;
      }

      #fifth {
        position: absolute;
        user-select: none;
        top: 49%;
        left: 40%;
        background-color: grey;
        padding: 10vh;
        border: 4px solid lightblue;
      }

      #sixth {
        position: absolute;
        user-select: none;
        top: 49%;
        left: 24.1%;
        background-color: grey;
        padding: 10vh;
        border: 4px solid lightblue;
        cursor: pointer;
      }

      #first:hover {
        background-color: aquamarine;
        border-color: aquamarine;
      }

      #second:hover {
        background-color: aquamarine;
        border-color: aquamarine;
      }

      #third:hover {
        background-color: aquamarine;
        border-color: aquamarine;
      }

      #fourth:hover {
        background-color: aquamarine;
        border-color: aquamarine;
      }

      #fifth:hover {
        background-color: aquamarine;
        border-color: aquamarine;
      }

      #sixth:hover {
        background-color: aquamarine;
        border-color: aquamarine;
      }

      .animate {
        animation-name: rotate;
        animation-duration: 2s;
      }

      @keyframes rotate {
        from {
          transform: rotateY(0deg);
        }
        to {
          transform: rotateY(180deg);
        }
      }
    </style>
  </head>
  <body>
    <span id="Heading">Memory</span>

    <div id="sixth">Hello</div>

    <script>
      let angle = 0;

      var button = document.getElementById("sixth");
      button.addEventListener("click", animate);

      function animate(event) {
        let element = event.target;
        angle += 180;
        let start = null;

        function step(timestamp) {
          if (!start) start = timestamp;
          let progress = timestamp - start;
          let currentAngle = angle - 180 * (1 - progress / 2000);
          element.style.transform = `rotateY(${currentAngle}deg)`;
          if (progress < 2000) {
            requestAnimationFrame(step);
          }
        }

        requestAnimationFrame(step);
      }
    </script>
  </body>
</html>
Hetal N
  • 158
  • 8
  • ty bro it worked that way. <3 i just started coding and i was really confused – Leqit Jul 27 '23 at 14:38
  • No worries Man :) If this answer helped you out then please accept this answer as correct answer ! which can help others as well ! – Hetal N Jul 28 '23 at 05:33