爲什麼鼠標點擊後圖像不旋轉？（javascript + css）

-1

我試圖讓按鈕單擊後圖像旋轉，但我無法讓圖像旋轉。將css的動畫行放入圖像後：css中的活動id塊，我可以通過單擊活動鼠標來旋轉圖像，但這不是我的任務所要求的。爲什麼鼠標點擊後圖像不旋轉？（javascript + css）

HTML

<a id="button" onclick="rotate()">Go</a> 


    <img class="click" id="image" src="http://placehold.it/500x500"> 


    <script type="text/javascript" src="script.js"></script> 
</body>

的Javascript

function rotate(){ 
    image.className = 'click'; 
}

CSS

#button { 
    font-family: "Verdana"; 
    font-weight: inherit; 
    font-size: 3vmin; 
    line-height: 14vmin; 
    text-align: center; 
    display: block; 
    border: none; 
    background: white; 
    width: 15vmin; 
    height: 15vmin; 
    margin: 2vmin auto; 
    border-radius: 10vmin; 
    cursor: pointer; 
    color: black; 
} 

.click:active { 
    display: block; 
    background: transparent; 
    border: 0px solid transparent; 
    height: 50vh; 
    width: 50vh; 
    margin: 5vh auto 0; 

    transition: height 100ms, border-width 100ms, border-color 100ms; 

    animation: rotate; 
    animation-delay: 100ms; 
    animation-timing-function: reverse; animation-iteration-count: normal; 
    animation-duration: 1s; 
    animation-play-state: running; 
    animation-direction: reverse; 
}

來源

2017-02-27 user50109

從哪裏'圖像'來？ –

@DhavalMarthak click：active class最初是id，「#image：active」 – user50109

您還沒有設置圖像的旋轉角度。 –

看看這個。看來你還沒有設置度。

<!DOCTYPE html> 
<html> 
    <head> 
    <script type="text/javascript"> 
     function rotate(){ 
     myImg=document.getElementById('image'); 
     myImg.className = 'rotate'; 
     } 
    </script> 
    <style> 
     .rotate { 
      -ms-transform: rotate(90deg); 
      -webkit-transform: rotate(90deg); 
      transform: rotate(90deg); 
     }  
    </style> 
    </head> 
    <body> 
    <a id="button" onclick="rotate()">Go</a> 
    <img class="click" id="image" src="http://placehold.it/500x500"> 
    </body> 
</html>

來源

2017-02-27 06:06:45

非常感謝！ – user50109

active是未初始化的，當你使用它，假設這是你的Javascript的全部。您需要改用document.getElementById('active')。

您的函數將元素的類設置爲'click'，由於img標記的類最初設置爲'click'，所以這沒什麼意義。調用函數時沒有任何變化。

CSS選擇器應該只是.click而不是.click:active，並且img標記不應該以類開頭。

來源

2017-02-27 06:04:44

我試過了，我無法得到圖像迴應。出於某種原因，當我將Click類重命名爲#image：active時，圖像會在點擊時旋轉，但是當我將其重命名爲.click時，它不響應。 – user50109

@ user50109您可能已經看到了Dharshini的答案，但他們給了您缺少的一塊。 –

爲什麼鼠標點擊後圖像不旋轉？ （javascript + css）

回答

相關問題

爲什麼鼠標點擊後圖像不旋轉？（javascript + css）