为什么没有围绕中心点发生 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;