我该如何将这个动态创建的3D对象放在它的父级上？ [英] How can I center this dynamically created 3d object on it's parent?

问题描述

从截图中可以看出，回转。理想情况下，我甚至不必为容器指定高度或宽度。

我该如何做到这一点？

以下是重要的代码：

 函数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; 
剩下：50％; 
 margin-left：-100px; 
 top：50％; 
 margin-top：-150px; 
} 
 .menu {
 transform-style：preserve-3d; 
位置：绝对; 
转换：.1s; 
宽度：100％; 
身高：100％; 
 transform-origin：50％; 
 background-color：rgba（0,0,0，.15）; 
} 
 .menu div {
 border：1px solid green; 
 padding：10px; 
位置：绝对; 
 
  

解决方案

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

top：50％;
剩下：50％;
transform：translate（-50％，-50％）;

由于您的位置结构复杂，因此请务必测试兼容性问题。

Here is the fiddle. Here is a screenshot:

It's obvious from the screenshot, but even more when you start applying some rotation. Ideally I wouldn't even have to specify a height or width for the container.

How can I accomplish this?

Here is the important code:

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

And the relevant 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;
}

解决方案

You could try to add these attributes to .menu div:

top: 50%; left: 50%; transform: translate(-50%, -50%);

Because of the complex position structure that you have, make sure to test compatibility issues.

这篇关于我该如何将这个动态创建的3D对象放在它的父级上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！