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

我在CSS中旋转了一个IMG的关键帧。现在，我想打一个按钮，改变了IMG从Y的旋转为X.如何停止和更改Javascript中的CSS关键帧？

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。我对编程很陌生，找不到解释如何做到这一点。

来源

2016-11-11 Bas van der Veen

使用插入类来改变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>

来源

2016-11-11 10:01:43

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

回答

相关问题