图片悬停时旋转
在悬停时为图片创建旋转效果。
- 当悬停在父元素(
<figure>
)上时,使用scale()
、rotate()
和transition
属性来对图片进行动画处理。 - 在父元素上使用
overflow: hidden
来隐藏图片变换的多余部分。
<figure class="hover-rotate">
<img src="https://picsum.photos/id/669/600/800.jpg"/>
</figure>
.hover-rotate {
overflow: hidden;
margin: 8px;
min-width: 240px;
max-width: 320px;
width: 100%;
}
.hover-rotate img {
transition: all 0.3s;
box-sizing: border-box;
max-width: 100%;
}
.hover-rotate:hover img {
transform: scale(1.3) rotate(5deg);
}