如何仅用JavaScript实现Div背景图旋转时按钮固定不动？

可以实现仅背景图旋转、按钮固定的效果，但你当前的代码逻辑存在问题——直接旋转包含按钮的父容器时，按钮作为子元素会继承这个旋转变换，导致跟着转动。要达成需求，需要调整DOM结构，让背景图和按钮处于独立的层级，再通过JavaScript仅控制背景图元素的旋转。

修改后的实现代码 #

HTML

<div class="container">
  <div class="bg-image" id="bg_image"></div>
  <button class="btn" onClick="rotate()">旋转背景图</button>
</div>

CSS

.container {
  position: relative;
  height: 400px;
  max-width: 400px;
  overflow: hidden; /* 防止背景图旋转后超出容器 */
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://www.w3schools.com/howto/img_snow.jpg");
  background-size: cover;
  transition: transform 0.3s ease; /* 可选：添加平滑过渡效果 */
}

.container .btn {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  z-index: 10; /* 确保按钮在背景图上方 */
}

.container .btn:hover {
  background-color: black;
}

JavaScript

let rotationDegree = 0;

function rotate() {
  rotationDegree += 45; // 每次点击旋转45度
  document.getElementById("bg_image").style.transform = `rotate(${rotationDegree}deg)`;
}

核心逻辑说明 #

• 把背景图放在独立的<div class="bg-image">元素中，按钮通过绝对定位直接挂载在父容器上，两者层级分离。
• JavaScript仅控制背景图元素的transform属性，按钮因为不在背景图元素的子层级，不会继承旋转变换，始终保持固定位置。
• 给背景图添加transition属性可以让旋转过程更平滑，这是可选优化。

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