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

使用insert类来改变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关键帧？

1 个答案: