html点击按钮图片旋转
时间: 2023-06-27 19:07:11 浏览: 44
您可以使用CSS3的`transform`属性来实现图片旋转,然后使用JavaScript来为按钮添加点击事件。
以下是一个示例代码:
HTML:
```html
<button id="rotateBtn">旋转图片</button>
<img id="image" src="your-image.jpg">
```
CSS:
```css
#image {
transition: transform 0.5s ease;
}
.rotate {
transform: rotate(45deg);
}
```
JavaScript:
```javascript
const rotateBtn = document.getElementById('rotateBtn');
const image = document.getElementById('image');
rotateBtn.addEventListener('click', () => {
image.classList.toggle('rotate');
});
```
解释:
首先,我们为图片添加了CSS3的`transition`属性来设置它的变换过渡时间,这样当旋转时,图片就会有一个平滑的过渡效果。
然后,我们定义了一个`.rotate`的类,用于在点击按钮时将其添加到图片上,从而使其旋转。
最后,我们使用JavaScript来获取按钮和图片元素,并为按钮添加了一个`click`事件监听器。当按钮被点击时,我们会将`.rotate`类添加到图片上,从而使其旋转。当再次点击按钮时,我们会将`.rotate`类从图片上移除,这样图片就会恢复到原来的状态。