如何在不修改HTML结构及不使用JavaScript的前提下单独旋转背景？

如何仅旋转背景本身，不修改HTML结构及不使用JavaScript？

可以通过CSS伪元素实现，无需改动原有HTML或引入JavaScript。核心思路是用伪元素单独承载背景图，对伪元素应用旋转动画，元素本身的内容保持不动。

实现代码 #

@keyframes rotateBackground {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.element {
  /* 核心：开启相对定位，让伪元素基于当前元素定位 */
  position: relative;
  /* 确保元素内容在伪元素上方 */
  z-index: 1;
  
  /* 保留你原有元素的其他样式，比如尺寸、内容排版等 */
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.element::before {
  content: "";
  /* 绝对定位覆盖整个元素区域 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 背景图相关样式移到伪元素上 */
  background: url("some-image.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* 让伪元素在内容下方，不遮挡文字/数据 */
  z-index: -1;
  /* 应用旋转动画 */
  animation: rotateBackground 5s linear infinite;
}

原理说明 #

1. 给.element设置position: relative，为伪元素提供定位基准
2. 通过::before伪元素创建一个覆盖整个元素的层，专门承载背景图
3. 伪元素的z-index: -1确保它在元素内容的下方，不会遮挡原有信息
4. 仅对伪元素应用旋转动画，实现背景图单独旋转的效果，元素本身及内容不受影响

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