这是主要是应用一个transition的效果rotateZ，他定义了一个转换，它可以让一个元素围绕横Z轴旋转，而不会对其进行变形。
本文右侧的文章作者卡片的头像就应用了这个效果。
代码如下
先看CSS代码，内容有详细的说明
css
.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结构如下
html
<div class="author-avatar">
<a href="http://wuean.com/author/wcglove" title="GavinWu" rel="author">
<img src="http://wuean.com/wp-content/uploads/2022/03/wcglove_avatar-80x80.png" class="avatar">
</a>
</div>
