如何仅旋转图片基底而非图片本身？参考Hotline Miami主菜单

我想做出《迈阿密热线1》主菜单那种效果——让图片的基底（父容器）旋转，但图片本身保持固定不转。现在直接旋转父容器时，图片会跟着一起转，试了常规方法没解决，求帮忙。现有代码如下：

index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>animation test</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <div class="purple">
      <img src="purple.png" class="cabin">  
    </div>
    <div class="white">
      <img src="white.png" class="cabin">
    </div>
  </body>
</html>

styles.css #

.purple {
  width: 40%;
  height: 40%;
  position: absolute;
  transform-origin: 50% 0%;
  animation: purple 75s ease-in-out infinite;
  z-index: -2;
}

.white {
  width: 40%;
  height: 40%;
  position: absolute;
  transform-origin: 50% 0%;
  animation: white 75s ease-in-out infinite;
  z-index: -1;
}

.white {
  right: 50%;
  top: 50%;
}

.purple {
  right: 50.25%;
  top: 50.75%;
}

body {
  background-color: black;
}

@keyframes white {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes purple {
 0% {
   transform: rotate(0deg);
 }
 100% {
   transform: rotate(360deg);
 }
}

解决方案 #

核心逻辑是让旋转的父容器和反向同步旋转的图片形成运动抵消：父容器转多少角度，图片就反向转相同角度，这样图片视觉上就能保持固定方向。

修改后的完整CSS代码：

.purple {
  width: 40%;
  height: 40%;
  position: absolute;
  transform-origin: 50% 0%;
  animation: purple 75s ease-in-out infinite;
  z-index: -2;
}

.white {
  width: 40%;
  height: 40%;
  position: absolute;
  transform-origin: 50% 0%;
  animation: white 75s ease-in-out infinite;
  z-index: -1;
}

/* 给图片添加反向旋转动画，抵消父容器的旋转 */
.cabin {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持图片比例，避免拉伸变形 */
  animation: counterRotate 75s ease-in-out infinite;
  transform-origin: 50% 0%; /* 和父容器旋转原点一致，确保抵消精准 */
}

.white {
  right: 50%;
  top: 50%;
}

.purple {
  right: 50.25%;
  top: 50.75%;
}

body {
  background-color: black;
}

@keyframes white {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes purple {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 反向旋转动画，参数和父容器完全同步 */
@keyframes counterRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg); /* 反向转360度，完全抵消父容器的正向旋转 */
  }
}

关键说明 #

• 图片的动画必须和父容器保持相同的时长、缓动函数，这样运动节奏完全匹配，抵消效果才自然。
• 旋转原点transform-origin必须和父容器一致，否则图片会出现偏移而非固定。
• object-fit: contain用于防止图片因父容器尺寸被拉伸，保留原始比例。

如果后续需要调整旋转速度或角度，只需同步修改父容器和图片的动画关键帧参数即可——比如父容器转180度，图片就反向转180度，始终保持运动抵消。

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