如何用HTML/CSS显示整图旋转的局部图像

核心思路是将旋转动画与裁剪逻辑分层实现——用嵌套容器分离两个功能，避免裁剪区域随旋转偏移。以下是可直接复用的代码示例：

完整代码实现 #

HTML #

<div class="top-banner">
  <!-- 外层：负责旋转动画 -->
  <div class="rotate-container">
    <!-- 内层：负责裁剪显示图片底部40% -->
    <div class="clip-wrapper">
      <img src="你的背景图地址" alt="背景图" class="bg-img">
    </div>
  </div>
  <!-- 前景内容（按需添加） -->
  <div class="foreground">
    <h2>你的前景标题</h2>
    <p>你的前景内容</p>
  </div>
</div>

CSS #

/* 顶部横幅容器，控制整体尺寸 */
.top-banner {
  position: relative;
  width: 100%;
  height: 350px; /* 根据需求调整高度 */
  overflow: hidden;
}

/* 旋转容器：仅负责执行旋转动画 */
.rotate-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 旋转动画参数可按需调整 */
  animation: slowRotate 25s linear infinite;
}

/* 裁剪容器：固定显示图片底部40% */
.clip-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* 背景图：通过负偏移实现底部截取 */
.bg-img {
  position: absolute;
  width: 100%;
  height: auto; /* 保持图片比例，需拉伸可改为100% */
  top: -60%; /* 向上偏移60%，刚好露出底部40% */
  left: 0;
  object-fit: cover; /* 确保图片覆盖容器，按需调整 */
}

/* 旋转动画定义 */
@keyframes slowRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 前景内容：悬浮在旋转图层上方 */
.foreground {
  position: relative;
  z-index: 10;
  color: #fff;
  padding: 3rem;
}

关键逻辑说明 #

1. 分层设计：
   外层.rotate-container只负责旋转，内层.clip-wrapper负责裁剪，两者独立工作，避免裁剪区域随旋转变形。
2. 精准裁剪：
   通过overflow: hidden的内层容器配合图片top: -60%的偏移，直接截取图片底部40%区域（偏移量=100%-40%）。
3. 动画独立：
   旋转动画仅作用于外层容器，裁剪后的图片会整体旋转，而显示区域始终固定为图片的底部40%。

替代方案（背景图版本） #

如果使用background-image而非<img>标签，可修改内层容器样式：

.clip-wrapper::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 250%; /* 要显示40%，需将背景高度设为容器的1/0.4=250% */
  top: -150%; /* 向上偏移150%，刚好露出底部40% */
  left: 0;
  background-image: url("你的背景图地址");
  background-size: cover;
  background-position: center;
}

为什么之前的方案无效？ #

• 直接在旋转容器上用clip-path/clip：裁剪路径会随容器一起旋转，导致显示区域不断偏移，不符合固定显示底部40%的需求。
• object-fit：仅控制图片的缩放填充方式，无法单独截取局部区域并保持裁剪位置固定。

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