CSS 中鼠标悬停 图片旋转

CSS 中鼠标悬停 图片旋转

---

w3school 中 transfrom 说明

主要使用的属性就是 transfrom

---

1. 第一种情况
   
   1.1 说明 当鼠标放到图片上之后 图片旋转, 这里的图片给的是背景图
   1.2 代码说明:

   transform: rotate(angle) 指定元素的 2D 旋转
   transition: all 0.6s 设定旋转的动画时间

<div class="UserImg-box">
	<div class="img" :style="{backgroundImage: `url(${user_img})`}"></div>
</div>

.UserImg-box {
	margin: 0 auto;
	width: 120px;
	height: 120px;
	text-align: center;
}
.UserImg-box:hover .img{
	transform: rotate(-360deg);
}
.img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-size: cover;
	background-position: 50%;
	transition: all 0.6s;
}

2. 第二种情况

和第一种情况的区别在于这种情况可以指定旋转的圆心

2.1 代码说明

transform-origin: 90% 40%; 设定旋转的圆心

.UserImg-box {
	margin: 0 auto;
	width: 120px;
	height: 120px;
	text-align: center;
	&:hover {
		.img {
			transform: rotate(-120deg);
		}
	}
	.img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-size: cover;
		background-position: 50%;
		transition: all 0.3s;
		transform-origin: 90% 40%;
	}
}