运用相同大小的图片,利用CSS3实现 “图片旋转”页面的效果
时间: 2024-02-25 07:59:27 浏览: 18
可以使用CSS3中的`transform`属性来实现图片旋转效果。以下是实现步骤:
1. HTML结构:在HTML中添加一个`<div>`元素,并在其中添加一个`<img>`元素,代码如下:
```html
<div class="rotate">
<img src="image.jpg" alt="图片">
</div>
```
2. CSS样式:为`<div>`元素设置宽度和高度,并使用`position`属性将其定位为相对定位。为`<img>`元素设置`max-width: 100%;`使其适应父元素。然后使用`transform`属性对`<div>`进行旋转,如下所示:
```css
.rotate {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: rotateY(0deg);
transition: transform 1s;
}
.rotate img {
max-width: 100%;
}
```
3. JS交互:为`<div>`元素添加鼠标悬停事件,当鼠标悬停在该元素上时,使用`transform`属性将其旋转180度,如下所示:
```javascript
document.querySelector('.rotate').addEventListener('mouseover', function() {
this.style.transform = 'rotateY(180deg)';
});
```
完整代码如下:
```html
<div class="rotate">
<img src="image.jpg" alt="图片">
</div>
<style>
.rotate {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: rotateY(0deg);
transition: transform 1s;
}
.rotate img {
max-width: 100%;
}
</style>
<script>
document.querySelector('.rotate').addEventListener('mouseover', function() {
this.style.transform = 'rotateY(180deg)';
});
</script>
```