CSS 中鼠标悬停图片旋转

最新推荐文章于 2023-11-07 00:15:00 发布

小火车况且况且

最新推荐文章于 2023-11-07 00:15:00 发布

阅读量7.3k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_43972992/article/details/102683734

CSS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用CSS的transform属性实现鼠标悬停时图片旋转的效果，包括基本的旋转设置及过渡动画，并演示了如何指定旋转圆心，适用于网页设计中的互动效果制作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 中鼠标悬停图片旋转

w3school 中 transfrom 说明

主要使用的属性就是 transfrom

第一种情况

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.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%;
	}
}