Javascript 如何将动态创建的三维对象置于其中心'；谁的父母？

以下是一个屏幕截图：

从屏幕截图上看很明显，但当你开始应用一些旋转时，情况会更糟。理想情况下，我甚至不必为容器指定高度或宽度

我怎样才能做到这一点

以下是重要的代码：

function RotaMenu ( el ) {
    this.element = el;
    this.rotationX = 0;
    this.rotationY = 0;
    this.panelCount = 0;
    this.menuHeight = 0;
    this.theta = 0;
    this.radius = 0;
}

RotaMenu.prototype.update = function() {
    this.panelCount = this.element.children().length;
    this.menuHeight = $(this.element).outerHeight();
  this.panelSize = $(this.element).children().first().outerHeight();
    this.theta = 360 / this.panelCount;
  if ($('input[name=whichSize]:checked').val() == 'p') {
        this.radius = Math.round( ( this.panelSize / 2) / Math.tan( Math.PI / this.panelCount ) );
  } else {
        this.radius = Math.round( ( this.menuHeight / 2) / Math.tan( Math.PI / this.panelCount ) );
  }
    var m = this;
    $(this.element).children().each(function(i) {
        var angle = m.theta * i;
        $(this).css('transform','rotateX(' + angle + 'deg) translateZ(' + m.radius + 'px)');
    });
    $(this.element).css('transform','translateZ(' + this.radius + 'px) ' + 'rotateX(' + this.rotationX + 'deg) rotateY(' + this.rotationY + 'deg)');
    $('#labelc').text('Panels: ' + this.panelCount);
};

以及相关的CSS：

.menu-container {
    position: absolute;
    perspective: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 100px;
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -150px;
}
.menu {
    transform-style: preserve-3d;
    position: absolute;
  transition: .1s;
    width: 100%;
    height: 100%;
    transform-origin: 50%;
  background-color: rgba(0,0,0,.15);
}
.menu   div {
  border: 1px solid green;
  padding: 10px;
  position: absolute;
}

---

您可以尝试将这些属性添加到.menu div：

最高：50%； 左：50%； 转换：翻译（-50%，-50%）

---

由于位置结构复杂，请确保测试兼容性问题

您可以尝试将这些属性添加到.menu div：

最高：50%； 左：50%； 转换：翻译（-50%，-50%）

---

由于位置结构复杂，请确保测试兼容性问题

这是一个可能提供一些背景的前一个问题：这是一个可能提供一些背景的前一个问题：