JavascriptでCSSキーフレームを停止および変更するにはどうすればよいですか？

私はHTMLでIMGを回転させる私のCSSでキーフレームを作った。今、私は基本的にボタンを押すことでROTATE IMG XにROTATE IMG Yを変更したい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);} 
    }*

XにYからIMGの回転を変更するボタンを作りたいです。私はプログラミングに慣れていないので、これをどうやって行うのかよくわかりません。

出典

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キーフレームを停止および変更するにはどうすればよいですか？

答えて

関連する問題