どのようにして、この動的に作成された3Dオブジェクトを親の中心に置くことができますか？ここで

Question

Here is the fiddle.スクリーンショットです：

それはスクリーンショットからも明らかですが、あなたには、いくつかの回転の適用を開始しても、よりとき。理想的には、コンテナの高さや幅を指定する必要はありません。

どうすればこの問題を解決できますか？

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; 
} 

Answer 1

あなたはdiv要素を.menuこれらの属性を追加しようとすることができます：

トップ：50％; 左：50％; トランスフォーム：translate（-50％、-50％）;

複雑な位置構造のため、互換性の問題をテストしてください。