如何停止和更改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關鍵幀？

回答

相關問題