HTML/CSS 悬停图片旋转

Gavin Wu 2022年05月25日 7:05 HTML/CSS 1,462 Views

这是主要是应用一个transition的效果rotateZ，他定义了一个转换，它可以让一个元素围绕横Z轴旋转，而不会对其进行变形。
本文右侧的文章作者卡片的头像就应用了这个效果。

代码如下

先看CSS代码，内容有详细的说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.avatar {
box-shadow : inset 0 -1px 0 #333;
/*设置图像阴影效果*/
-webkit-box-shadow: inset 0 -1px 0 #333;
-webkit-transition: 0.5s;
-webkit-transition: -webkit-transform 0.5s ease-out;
transition : transform 0.5s ease-out;
/*图像旋转变化时间设置为0.5秒*/
-moz-transition : -moz-transform 0.5s ease-out;
}

.avatar:hover {
/*鼠标悬浮在头像时的CSS样式*/
transform : rotateZ(360deg);
/*图像旋转360度*/
-webkit-transform: rotateZ(360deg);
-moz-transform : rotateZ(360deg);
}

HTML结构如下

1
2
3
4
5