如何停止和更改 Javascript 中的 CSS 关键帧？

Question

我在 CSS 中制作了一个关键帧，它在 HTML 中旋转了一个 IMG。现在，我想制作一个按钮，将 IMG 的旋转从 Y 更改为 X。

CSS:
  */* Rotate IMG Y */
@keyframes rotate {
    0%       {transform: rotateY(0deg);}
    100%     {transform: rotateY(360deg);}
  }
  /* ROTATE IMG X */
  @keyframe rotateOther {
    0%      {transform: rotateX(0deg);}
    100%    {transform: rotateX(360deg);}
  }*

我基本上想通过按一个按钮将 ROTATE IMG Y 更改为 ROTATE IMG X。我是编程新手，找不到任何好的解释如何做到这一点。

Answer 1

使用插入class来改变div的css

<!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
        width: 200px;
        height: 100px;
        background-color: yellow;
      animation: rotate 5s 1;
       /* transform: rotate;*/
    }

    @keyframes rotate {
        0%       {transform: rotateY(0deg);}
        100%     {transform: rotateY(360deg);}
      }

    .newstyle{
     background-color: green;
      animation: btnrotate 5s 1;
    }

    @keyframes btnrotate{
        0%       {transform: rotateX(360deg);}
        100%     {transform: rotateX(0deg);}
      }

    </style>
    </head>
    <body>

    <div id="mydiv">Hello</div>  <button type="button" id="rotate" onclick="myfun(event)" > rotate </button>
    <br>




    <script>
    function myfun(event){
      event.preventDefault();
    console.log(event);
    document.getElementById("mydiv").classList.add("newstyle");

    };
    </script>
    </body>
    </html>

如何停止和更改 Javascript 中的 CSS 关键帧？

How do I stop and change a CSS keyframe in Javascript?

html

javascript

css

rotation

keyframe