为什么围绕中心点的CSS 3D旋转没有发生？

Question

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

当我只有一个单独的立方体时，它的工作原理和预期一样。当我把3个立方体连接成一列时，它的工作原理和预期一样。只是当我把3个柱子连接成一个 "部分 "时，这个 "部分 "没有沿着中心点旋转。

当柱子和立方体出现这个问题时，是因为我没有给它们设置一个合适的高度和宽度。我是否为".section "元素设置了错误的高度和宽度？如果是，应该是什么？如果能解释为什么我的尺寸是错误的，我将非常感激。

(对不起，我的代码是天文数字，但SO不允许只用codepen，而且简化的代码也不会出现这个问题)。

    <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

好吧，我在一片无知的海洋中游泳，不知道Transform-origin可以接受对应于z轴的第三个值。基本上，默认的变换原点对于x和y的访问是正确的，但我需要为z-index定制一个原点，以便将其推后一点。

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