在CSS中,我們可以使用transform
屬性來實現(xiàn)圖片點擊旋轉(zhuǎn)90度的效果,以下是一個簡單的示例:
1、給圖片添加一個點擊事件監(jiān)聽器,以便在點擊時觸發(fā)旋轉(zhuǎn)動作。
2、當圖片被點擊時,使用CSS的transform
屬性將圖片旋轉(zhuǎn)90度。
下面是一個具體的實現(xiàn)示例:
HTML代碼:
<img id="rotateImage" src="image.jpg" alt="圖片" />
CSS代碼:
#rotateImage { transition: transform 0.5s ease; } #rotateImage.rotate { transform: rotate(90deg); }
JavaScript代碼:
document.getElementById('rotateImage').addEventListener('click', function() { this.classList.add('rotate'); });
在這個示例中,我們給圖片添加了一個點擊事件監(jiān)聽器,當圖片被點擊時,它會觸發(fā)一個名為rotate
的CSS類,這個類會將圖片旋轉(zhuǎn)90度。transition
屬性用于添加過渡效果,使旋轉(zhuǎn)動作更加平滑。
你可以根據(jù)自己的需求調(diào)整這個示例,例如改變旋轉(zhuǎn)的角度、添加更多的動畫效果等,希望這個示例能幫助你實現(xiàn)所需的功能!