能否使用CSS实现嵌套式堆叠3D变换？

我正在学习CSS 3D变换，尝试构建交互式3D模型。在「兄弟元素」布局中，3D效果符合预期；但在「嵌套」布局中，Z轴变换没有按预期实现元素堆叠。

基础立方体结构（兄弟元素） #

最初我创建的简单立方体，所有面都是兄弟元素，结构如下：

<div class="cube">
  <div class="front"></div>
  <div class="back"></div>
  <div class="top"></div>
  <div class="bottom"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

扩展时的嵌套布局问题 #

当尝试在这个立方体基础上扩展（比如在顶面添加小立方体）时，我最初尝试用嵌套元素的方式，但出现了问题：

• 尝试方法：使用嵌套元素结构，将小立方体的面放在主立方体的顶面元素内
• 预期效果：嵌套的小立方体元素能在3D空间中正常堆叠
• 实际结果：嵌套元素继承了父元素的X、Y轴旋转，但在Z轴方向始终和父元素保持平面状态，无法形成3D堆叠

我的嵌套结构大致如下：

<div class="scene">
  <div class="cube__front"></div>
  <div class="cube__back"></div>
  <div class="cube__top">
    <div class="smaller-cube__front"></div>
    <div class="smaller-cube__back"></div>
    <!-- 其他小立方体面 -->
  </div>
  <div class="cube__bottom"></div>
  <div class="cube__left"></div>
  <div class="cube__right"></div>
</div>

当前可行的解决方案 #

目前我通过把所有立方体的面都设置为兄弟元素，实现了预期的3D堆叠效果，结构示例如下：

<div class="scene">
  <div class="cube__front"></div>
  <div class="cube__back"></div>
  <div class="cube__top"></div>
  <div class="cube__bottom"></div>
  <div class="cube__left"></div>
  <div class="cube__right"></div>

  <!-- 放在主立方体顶面的小立方体 -->
  <div class="smaller-cube__front"></div>
  <div class="smaller-cube__back"></div>
  <!-- 其他小立方体面 -->
</div>

疑问 #

是否可以用最初尝试的嵌套元素结构实现同样的3D堆叠效果？

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