为了实现这个效果，你可以使用HTML、CSS和JavaScript。下面是一个简单的示例，展示了如何使用这些技术来创建一个鼠标经过头像时旋转180度并放大2倍，离开时恢复原样的特效。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>头像特效</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="avatar">
<img src="avatar.jpg" alt="Avatar">
</div>
</body>
</html>
CSS (styles.css)
.avatar {
width: 200px;
height: 200px;
overflow: hidden;
margin: 50px;
transition: transform 0.5s ease-in-out; /* 动画效果 */
}
.avatar img {
width: 100%;
height: auto;
}
.avatar:hover {
transform: rotate(180deg) scale(2); /* 旋转180度并放大2倍 */
}
在这个示例中，.avatar 类代表包含头像的 <div> 元素。当鼠标悬停在这个 <div> 上时，CSS 的 :hover 伪类会触发，应用 transform 属性来旋转和放大头像。transition 属性用于添加过渡效果，使旋转和放大动作更加平滑。
解释
width和height设置了头像的初始大小。overflow: hidden;确保在放大时不会超出其容器。transition: transform 0.5s ease-in-out;定义了过渡效果的属性（transform）、持续时间（0.5s）和缓动函数（ease-in-out）。.avatar:hover伪类定义了鼠标悬停时的样式，即旋转180度（rotate(180deg)）并放大2倍（scale(2)）。
这个示例仅使用了CSS，因此无需JavaScript。当然，你也可以根据需要添加JavaScript来增强交互性或处理更复杂的逻辑。
标签：鼠标,transform,旋转,头像,180,avatar,放大 From： https://www.cnblogs.com/ai888/p/18620354