HTML/CSS旋转动画异常：元素位置错乱问题求助

问题描述 #

移除@keyframes rotate代码块时，页面风扇元素布局正常；重新添加该动画后，所有叶片和杆的位置完全错乱，无法呈现原本的风扇结构。

问题根源 #

当给父容器#f1应用旋转动画时，transform属性会触发CSS的包含块规则：任何设置了transform且值不为none的元素，会自动成为其子元素的定位参考容器。原本子元素的left/top百分比是相对于<body>的尺寸计算的，现在变成相对于#f1的尺寸——但#f1默认没有设置宽高，且内部子元素都是absolute定位，导致#f1的宽高被计算为0，直接造成所有子元素定位错乱。

修复步骤 #

1. 给#f1设置position: relative，并指定宽高为视口大小，让子元素的百分比定位参考系和之前相对于<body>时保持一致：

#f1 {
  position: relative;
  width: 100vw;
  height: 100vh;
  animation-name: rotate;
  animation-timing-function: linear;
  animation-duration: 60s;
  animation-iteration-count: infinite; /* 让动画无限循环，可选 */
}

2. （可选）给中心圆#centerCircle添加z-index，确保它始终显示在风扇叶片上方：

#centerCircle {
  /* 原有样式 */
  z-index: 10;
}

完整修复后的CSS代码 #

#f1 {
  position: relative;
  width: 100vw;
  height: 100vh;
  animation-name: rotate;
  animation-timing-function: linear;
  animation-duration: 60s;
  animation-iteration-count: infinite;
}

#fluegelr {
  left: 52%;
  top: 53%;
}

#stabr {
  left: 50%;
  top: 55%;
}

#fluegell {
  transform: rotate(180deg);
  left: 41%;
  top: 55%;
}

#stabl {
  transform: rotate(180deg);
  left: 46.4%;
  top: 55%;
}

#fluegelh {
  transform: rotate(90deg);
  left: 46.9%;
  top: 43%;
}

#stabh {
  transform: rotate(90deg);
  left: 48.5%;
  top: 52%;
}

#fluegelu {
  transform: rotate(270deg);
  left: 45.9%;
  top: 65%;
}

#stabu {
  transform: rotate(270deg);
  left: 48.5%;
  top: 58%;
}

.fluegel {
  position: absolute;
  width: 8rem;
  height: 1rem;
  background-color: aqua;
  border-radius: 8rem 8rem 0 0;
  border: 3px solid black;
}

.stab {
  position: absolute;
  height: 2px;
  width: 58px;
  background-color: black;
}

#centerCircle {
  position: absolute;
  border-radius: 100%;
  background-color: black;
  height: 20px;
  width: 20px;
  left: 49.5%;
  top: 53.8%;
  z-index: 10;
}

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

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