求助：实现图片环形旋转且图片与文字始终保持正向的效果

要实现环形旋转且图片、底部文字始终保持正向，核心是将轨道旋转动画与元素自身的正向状态分离，避免容器旋转带动内容倾斜。以下是调整后的完整代码：

修改后的HTML结构 #

<div class="container">
  <div class="item">
    <img src="https://images.unsplash.com/photo-1617854818583-09e7f077a156?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="Image 1">
    <span>文字1</span>
  </div>
  <div class="item">
    <img src="https://images.unsplash.com/photo-1624555130581-1d9cca783bc0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80" alt="Image 2">
    <span>文字2</span>
  </div>
  <div class="item">
    <img src="https://images.unsplash.com/photo-1480944657103-7fed22359e1d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" alt="Image 3">
    <span>文字3</span>
  </div>
  <div class="item">
    <img src="https://images.unsplash.com/photo-1624555130581-1d9cca783bc0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80" alt="Image 4">
    <span>文字4</span>
  </div>
  <div class="item">
    <img src="https://images.unsplash.com/photo-1480944657103-7fed22359e1d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1032&q=80" alt="Image 5">
    <span>文字5</span>
  </div>
</div>

修改后的CSS样式 #

.container {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 50px auto;
}

.item {
  position: absolute;
  width: 50px;
  text-align: center;
  animation: orbit 10s linear infinite;
  left: 50%;
  top: 50%;
  margin-left: -25px;
}

/* 初始化每个元素在环形轨道的位置 */
.item:nth-child(1) { transform: rotate(0deg) translate(75px) rotate(0deg); }
.item:nth-child(2) { transform: rotate(72deg) translate(75px) rotate(-72deg); }
.item:nth-child(3) { transform: rotate(144deg) translate(75px) rotate(-144deg); }
.item:nth-child(4) { transform: rotate(216deg) translate(75px) rotate(-216deg); }
.item:nth-child(5) { transform: rotate(288deg) translate(75px) rotate(-288deg); }

.item img {
  width: 50px;
  height: 50px;
  border-radius: 3px;
  transform: rotate(0deg);
}

.item span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  transform: rotate(0deg);
}

/* 环形轨道旋转动画 */
@keyframes orbit {
  from { transform: rotate(0deg) translate(75px) rotate(0deg); }
  to { transform: rotate(360deg) translate(75px) rotate(-360deg); }
}

核心原理说明 #

1. 嵌套结构隔离：用.item包裹图片和文字，将轨道旋转动画单独应用在.item上，避免容器旋转影响所有内容的朝向。
2. 双旋转抵消技巧：transform: rotate(Ndeg) translate(75px) rotate(-Ndeg) 是实现正向的关键：
   • 第一个rotate(Ndeg)将元素定位到环形轨道的对应角度
   • translate(75px)将元素移动到轨道半径位置
   • 第二个rotate(-Ndeg)抵消之前的旋转，让图片和文字恢复正向
3. 动画全程保持正向：轨道动画过程中，双旋转的抵消效果持续生效，确保元素在环形移动时始终保持初始朝向。

内容的提问来源于stack exchange，提问作者kittu