为什么CSS 3D旋转不发生在中心点？

Question

我正在构建一个3d立方体的聚合，并试图旋转聚合的部分。由于某种原因，它没有沿着中心点旋转。

当我有一个单独的立方体时，它会像预期的那样工作。当我将3个多维数据集连接到一个列中时，它会像预期的那样工作。只是当我将3列连接到一个“部分”时，“区段”就不会沿着中心点旋转。

当列和立方体有这个问题时，是因为我没有为它们设置适当的高度和宽度。我是否为“.section”元素设置了错误的高度和宽度？如果是的话，应该是什么？解释为什么我的维度是错误的，也将不胜感激。

(不好意思使用天文代码，但不允许只编写代码，简化代码不会出现问题。)

    <div class="scene">
      <div class="section col-section">
        <div class="col col-back">
          <div class="cube">
            <div class="cube__face cube__face--front">
              <div>front</div>
            </div>  
            <div class="cube__face cube__face--back">
              <div>back</div>
            </div>
            <div class="cube__face cube__face--right">
              <div>right</div>
            </div>
            <div class="cube__face cube__face--left">
              <div>left</div>
            </div>
            <div class="cube__face cube__face--top">
              <div>top</div>
            </div>
            <div class="cube__face cube__face--bottom">
              <div>bottom</div>
            </div>
          </div>
          <div class="cube">
            <div class="cube__face cube__face--front">
              <div>front</div>
            </div>  
            <div class="cube__face cube__face--back">
              <div>back</div>
            </div>
            <div class="cube__face cube__face--right">
              <div>right</div>
            </div>
            <div class="cube__face cube__face--left">
              <div>left</div>
            </div>
            <div class="cube__face cube__face--top">
              <div>top</div>
            </div>
            <div class="cube__face cube__face--bottom">
              <div>bottom</div>
            </div>
          </div>
          <div class="cube">
            <div class="cube__face cube__face--front">
              <div>front</div>
            </div>  
            <div class="cube__face cube__face--back">
              <div>back</div>
            </div>
            <div class="cube__face cube__face--right">
              <div>right</div>
            </div>
            <div class="cube__face cube__face--left">
              <div>left</div>
            </div>
            <div class="cube__face cube__face--top">
              <div>top</div>
            </div>
            <div class="cube__face cube__face--bottom">
              <div>bottom</div>
            </div>
          </div>
        </div>      
        <div class="col col-middle">
          <div class="cube">
            <div class="cube__face cube__face--front">
              <div>front</div>
            </div>  
            <div class="cube__face cube__face--back">
              <div>back</div>
            </div>
            <div class="cube__face cube__face--right">
              <div>right</div>
            </div>
            <div class="cube__face cube__face--left">
              <div>left</div>
            </div>
            <div class="cube__face cube__face--top">
              <div>top</div>
            </div>
            <div class="cube__face cube__face--bottom">
              <div>bottom</div>
            </div>
          </div>
          <div class="cube">
            <div class="cube__face cube__face--front">
              <div>front</div>
            </div>  
            <div class="cube__face cube__face--back">
              <div>back</div>
            </div>
            <div class="cube__face cube__face--right">
              <div>right</div>
            </div>
            <div class="cube__face cube__face--left">
              <div>left</div>
            </div>
            <div class="cube__face cube__face--top">
              <div>top</div>
            </div>
            <div class="cube__face cube__face--bottom">
              <div>bottom</div>
            </div>
          </div>
          <div class="cube">
            <div class="cube__face cube__face--front">
              <div>front</div>
            </div>  
            <div class="cube__face cube__face--back">
              <div>back</div>
            </div>
            <div class="cube__face cube__face--right">
              <div>right</div>
            </div>
            <div class="cube__face cube__face--left">
              <div>left</div>
            </div>
            <div class="cube__face cube__face--top">
              <div>top</div>
            </div>
            <div class="cube__face cube__face--bottom">
              <div>bottom</div>
            </div>
          </div>
        </div>      
        <div class="col col-front">
          <div class="cube">
            <div class="cube__face cube__face--front">
              <div>front</div>
            </div>  
            <div class="cube__face cube__face--back">
              <div>back</div>
            </div>
            <div class="cube__face cube__face--right">
              <div>right</div>
            </div>
            <div class="cube__face cube__face--left">
              <div>left</div>
            </div>
            <div class="cube__face cube__face--top">
              <div>top</div>
            </div>
            <div class="cube__face cube__face--bottom">
              <div>bottom</div>
            </div>
          </div>
          <div class="cube">
            <div class="cube__face cube__face--front">
              <div>front</div>
            </div>  
            <div class="cube__face cube__face--back">
              <div>back</div>
            </div>
            <div class="cube__face cube__face--right">
              <div>right</div>
            </div>
            <div class="cube__face cube__face--left">
              <div>left</div>
            </div>
            <div class="cube__face cube__face--top">
              <div>top</div>
            </div>
            <div class="cube__face cube__face--bottom">
              <div>bottom</div>
            </div>
          </div>
          <div class="cube">
            <div class="cube__face cube__face--front">
              <div>front</div>
            </div>  
            <div class="cube__face cube__face--back">
              <div>back</div>
            </div>
            <div class="cube__face cube__face--right">
              <div>right</div>
            </div>
            <div class="cube__face cube__face--left">
              <div>left</div>
            </div>
            <div class="cube__face cube__face--top">
              <div>top</div>
            </div>
            <div class="cube__face cube__face--bottom">
              <div>bottom</div>
            </div>
          </div>
        </div>
      </div>
    </div>

      .scene {
        perspective: 600px;
      }

      .cube {
        width: 100px;
        height: 100px;
        position: relative;
      }

      .cube__face {
        position: absolute;
        width: 100px;
        height: 100px;
        color: white;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .cube__face--front  {
        transform: rotateY(0deg) translateZ(50px);
        background-color: pink;
      }

      .cube__face--right {
        transform: rotateY(90deg) translateZ(50px);
        background-color: yellow;
      }

      .cube__face--back {
        transform: rotateY(180deg) translateZ(50px);
        background-color: green;
      }

      .cube__face--left {
        transform: rotateY(-90deg) translateZ(50px);
        background-color: blue;
      }

      .cube__face--top {
        transform: rotateX(90deg) translateZ(50px);
        background-color: orange;
      }

      .cube__face--bottom {
        transform: rotateX(-90deg) translateZ(50px);
        background-color: magenta;
      }

      .col {
        position: absolute;
        transform-style: preserve-3d;
        width: 100px;
        height: 300px;
      }

      .col .cube {
        position: absolute;
        top: 100px;
      }

      .col .cube:first-child {
        top: 0;
      }

      .col .cube:last-child {
        top: 200px;
      }

      .col-back {
        transform: translateZ(-200px);
      }

      .col-middle {
        transform: translateZ(-100px);
      }

      .section {
        transform-style: preserve-3d;
        backface-visibility: hidden;
        transform: rotateX(0deg);
        transition: all 1s linear;
      }

      .col-section {
        width: 100px;
        height: 100px;
      }

Answer 1

好的，我在一片无知的海洋中游泳，不知道转换原点接受一个与z轴对应的第三个值。基本上，对于x和y访问来说，默认的转换原点是正确的，但是我需要一个自定义的z索引来将它推回原点。

transform-origin: 50px 150px -100px;