【前端笔记】css实现多元素中心旋转

css实现多元素中心旋转

• 一、实现思路
• 二、GIF预览
• 三、实现代码
• • 1.html代码
  • 2.css代码

一、实现思路

	1、先把元素定位到想旋转的位置（中心点）
	2、确定旋转的方向（顺/逆时针）
	3、偏移一定距离后（半径）
	4、最后让元素反方向自转（实现元素文字始终为正向）
	5、鼠标悬浮动画暂停（可选）

二、GIF预览

三、实现代码

1.html代码

代码如下（示例）：

<div className="MainBox ">
   	<div className='Provincial items'>
		省级
	</div>
 	<div className='Municipal items'>
		市级
	</div>
</div>

2.css代码

代码如下（示例）：

.MainBox{
	width: 220px;
 	height: 220px;
	position: relative;
	.items {
		width: 70px;
        height: 70px;
 		position: absolute;
		top: 75px;
		left: 75px;
		.Provincial {
			animation: action 10s linear infinite;
		}
		.Municipal {
			animation: action1 10s linear infinite;
		}
	}
}
	//  悬浮后暂停
.MainBox:hover { 
	div {
		animation-play-state: paused;
	}
}

    // 旋转动画
@keyframes action {
	from {
		transform: rotate(0deg) translate(78px) rotate(0deg);
	}

	to {
		transform: rotate(360deg) translate(78px) rotate(-360deg);
	}
}
@keyframes action1 {
	0% {
		transform: rotate(180deg) translate(78px) rotate(-180deg);
	}

	100% {
		transform: rotate(540deg) translate(78px) rotate(-540deg);
	}
}