基本步骤：
- 将元素统一定位到中间上侧
- 使用rorate将各个子元素进行计算，放置在合适的位置。
- 做动画让所有元素旋转
- 对元素中的内容做校正动画，保持元素内容方向不动。
测试效果图：
截屏2025-06-29 19.25.26.png
简单源码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>测试旋转效果</title>
<link rel="stylesheet" href="" />
<style>
.bg {
width: 1000px;
height: 1000px;
background-color: gray;
}
.container {
position: absolute;
left: 100px;
top: 100px;
width: 400px;
height: 400px;
border: solid 1px red;
border-radius: 200px;
position: relative;
--init: 0deg;
}
.item {
position: absolute;
left: 150px;
top: -50px;
width: 100px;
height: 100px;
border: solid 1px red;
display: block;
/* x-offset: 距离左侧偏移量，y-offset: 距离上侧偏移量; */
transform-origin: center 250px;
animation: ratation 2s linear infinite;
background-color: green;
--init: 0deg;
transform: rotate(var(--init));
img {
width: 100%;
height: 100%;
border-radius: 50px;
}
}
/* 这个地方可以使用sass，less简写 */
.item:nth-child(1) {
--init: 0deg;
}
.item:nth-child(2) {
--init: 72deg;
}
.item:nth-child(3) {
--init: 144deg;
}
.item:nth-child(4) {
--init: 216deg;
}
.item:nth-child(5) {
--init: 288deg;
}
/* （1）给container做一个整体旋转动画，给每个img做一个校正的动画 */
.container {
animation: rotation 20s linear infinite;
img {
/* transform: rotate(calc(-1 * var(--init))); */
transform: rotate(calc(0deg - var(--init)));
animation: img-rotation 20s linear infinite;
}
}
@keyframes rotation {
to {
transform : rotate(360deg)
}
}
@keyframes img-rotation {
to {
transform: rotate(calc(-360deg - var(--init)));
}
}
/* （2）可以单独给每一个item做旋转动画，每一个img做校正动画 */
/* .item {
animation: item-rotation 20s linear infinite;
img {
transform: rotate(calc(-1 * var(--init)));
animation: img-rotation 20s linear infinite;
}
}
@keyframes item-rotation {
to {
transform: rotate(calc(360deg + var(--init)));
}
}
@keyframes img-rotation {
to {
transform: rotate(calc(-360deg - var(--init)));
}
} */
/* （3）container,img 合用一个动画（正序，逆序） */
/* .container {
animation: rotation 20s linear infinite;
img {
transform: rotate(calc(-1 * var(--init)));
animation: rotation 20s linear infinite reverse;
}
}
@keyframes rotation {
to {
transform : rotate(calc(360deg - var(--init)))
}
} */
</style>
</head>
<body>
<div class="bg">
<div class="container">
<div class="item"><img src="./1.jpeg" alt="图片1" /></div>
<div class="item"><img src="./2.jpeg" alt="图片2" /></div>
<div class="item"><img src="./3.jpeg" alt="图片3" /></div>
<div class="item"><img src="./4.jpeg" alt="图片4" /></div>
<div class="item"><img src="./5.jpeg" alt="图片5" /></div>
</div>
</div>
</body>
</html>
获取var()负值的时候 -1*var() 或者使用0deg-var(), 变量数值计算要使用calc()
