Joomla 5搭配SP Page Builder v5中自定义HTML/CSS旋转图片无法保持直立的问题求助

大家好，我目前在使用Joomla 5搭配SP Page Builder v5开发网站，最近通过嵌入自定义HTML/CSS做了一个环绕中心元素旋转的视觉效果，原型参考了CodePen的思路，但遇到了个棘手的问题：轨道上的图片虽然能跟着轨道一起旋转，但没法保持直立状态，会随着轨道的旋转角度同步倾斜，看起来很不协调。

下面是我用到的完整代码：

CSS代码 #

/*Slide 1*/
.round-container {
  margin: 0 auto;
  position: relative;
  width: 80vw;
  height: 80vw;
  max-width: 500px;
  max-height: 500px;
  overflow: hidden;
}

.round-container .center-object {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
}

.round-container .center-object img {
  max-width: 80%;
}

/*orbit one*/
.round-container .orbit-one {
  position: absolute;
  z-index: 20;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  animation: spin 20s linear infinite;
}

.round-container .orbit-one::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250px;
  height: 250px;
  border: 2px solid rgb(36, 36, 102);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.round-container .orbit-one .item {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 0px;
  transform: translate(-50%, -50%) rotate(calc(360deg / 4 * var(--i))) translate(220px);
  background-color: transparent;
  padding: 0px 0;
  transition: none;
}

.round-container .orbit-one .item img {
  max-width: 20%;
  height: auto;
  display: block;
  transform: rotate(calc(-1 * var(--angle)));
}

.round-container .orbit-two .item img {
  max-width: 20%;
  height: auto;
  display: block;
  transform: rotate(calc(-1 * var(--angle)));
}

/*orbit-two*/
.round-container .orbit-two {
  position: absolute;
  z-index: 20;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  animation: spin 30s linear infinite;
}

.round-container .orbit-two::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  border: 2px solid rgb(36, 36, 102);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.round-container .orbit-two .item {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 0px;
  transform: translate(-50%, -50%) rotate(calc(360deg / 8 * var(--i))) translate(300px);
  background-color: transparent;
  padding: 0px 0;
  transition: none;
}

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

HTML代码 #

<div class="col-12 dg-container">
  <div class="round-container">
    <!--logo digital-->
    <div class="center-object">
      <div data-tilt>
        <img src="http://localhost/digitalums/wp-content/uploads/2025/07/Logo-Digital-UMS-warnaPNG.png" alt="center" />
      </div>
    </div>
    <div class="orbit-one">
      <div class="item" style="--i: 0; --angle: 0deg">
        <img src="https://images.unsplash.com/vector-1755675573266-276b5515d030?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image" />
      </div>
      <div class="item" style="--i: 1; --angle: 45deg">
        <img src="https://images.unsplash.com/vector-1755675573198-93b6564873eb?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image" />
      </div>
      <div class="item" style="--i: 2">
        <img src="https://images.unsplash.com/vector-1755675573697-02e027619a42?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="blue-icon" />
      </div>
      <div class="item" style="--i: 3">
        <img src="https://images.unsplash.com/vector-1755675573198-93b6564873eb?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="blue-icon" />
      </div>
    </div>
    <div class="orbit-two">
      <div class="item" style="--i: 0">
        <img src="https://images.unsplash.com/vector-1755675573223-91b5f696efad?q=80&w=2360&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image" />
      </div>
      <div class="item" style="--i: 1">
        <img src="https://images.unsplash.com/vector-1755675573198-93b6564873eb?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="image" />
      </div>
      <div class="item" style="--i: 2">
        <img src="https://images.unsplash.com/vector-1755675573198-93b6564873eb?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="blue-icon" />
      </div>
      <div class="item" style="--i: 3">
        <img src="https://images.unsplash.com/vector-1755675573198-93b6564873eb?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="blue-icon" />
      </div>
      <div class="item" style="--i: 4">
        <img src="https://images.unsplash.com/vector-1755675573198-93b6564873eb?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="blue-icon" />
      </div>
    </div>
  </div>
</div>

我尝试过用transform: rotate(calc(-1 * var(--angle)))来抵消轨道旋转带来的倾斜，但发现很多item元素根本没设置--angle变量，就算设置了的，效果也完全不对。有没有朋友能帮忙分析下问题出在哪，或者给个可行的解决方案，让所有轨道上的图片在旋转时始终保持直立？

内容来源于stack exchange