Javascript 使用jquery动态构建元素的三维圆柱体

更新：我已经清理了很多（我想），但似乎更糟。这里是一个小提琴与一些附加功能，如使用箭头键旋转对象。这样可以更容易地看到问题

---

原始问题

我正在尝试使用JQuery动态创建一个3D垂直旋转木马，基于。我试图从一开始就尽可能地基本和动态，但它没有结合在一起（字面上）

以下是我所拥有的：

函数RotaMenu（e）{
该元素=e；
这是旋转=0；
this.panelCount=this.element.children（）.length；
this.panelSize=$（this.element）.outerHeight（）；
this.theta=360/this.panelCount；
this.radius=Math.round（（this.panelSize/2）/Math.tan（Math.PI/this.panelCount））；
console.log（“创建的新菜单：panelCount=“+this.panelCount+”，panelSize=“+this.panelSize+”，theta=“+this.theta+”，radius=“+this.radius”）；
}
RotaMenu.prototype.update=函数（）{
this.theta=360/this.panelCount；
this.radius=Math.round（（this.panelSize/2）/Math.tan（Math.PI/this.panelCount））；
对于（i=0；i
.rmenu{
边缘顶部：100px；
}
.rmenu分区{
边框：1px纯色灰色；
宽度：100px；
高度：20px；
}

1.
2.
3.
4.
5.
6.
已更新

现在我在我的电脑上看到了为什么之前的版本需要调整我之前添加的半径。这是因为你是根据高度正确计算的，当然你的目标是垂直的。只有两个微小的更改可以影响这种差异：
rotateX
而不是Y，并使用之前的正确半径计算。为了反映这些变化，我编辑了答案。我相信这将是你正在寻找的

解决方案
我认为您的主要问题是缺少一些css，这些css使您更容易建立基本结构，以便进行调试。您还需要外部容器，以便可以为透视添加摄影机点，使变换看起来漂亮，否则它将看起来平坦

这是我的样本：

重要CSS：

.rmenu {
  position: absolute;
  transform-style: preserve-3d;
  margin-top: 100px;
}
.rmenu div {
  border: 1px solid gray;
  width: 100px;
  height: 20px;
  margin: 0;
  position: absolute;
}
.container {
  position: relative;
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

还有html的变化

<section class="container">
  <div id="mainmenu" class="rmenu">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>  
</section>


1.
2.
3.
4.
5.
6.

jquery也有一些变化：

function RotaMenu ( e ) {
    this.element = e;
    this.rotation = 0;
    this.panelCount = this.element.children().length;
    this.panelSize = $(this.element).children().first().outerHeight();
    this.theta = 360 / this.panelCount;
    this.radius = Math.round( ( this.panelSize / 2) / Math.tan( Math.PI / this.panelCount ) )
    console.log("Created new menu: panelCount=" + this.panelCount + ", panelSize=" + this.panelSize + ", theta=" + this.theta + ", radius=" + this.radius);
}

RotaMenu.prototype.update = function() {
    for ( i = 0; i < this.panelCount; i++ ) {
        panel = $(this.element).children()[i];
        angle = Math.round(this.theta * i);
        $(panel).css('transform','rotateX(' + angle + 'deg) translateZ(' + this.radius + 'px)');
    }
};


$(function() {
    var mainmenu = new RotaMenu($('#mainmenu'));
    mainmenu.update();
});

函数RotaMenu（e）{
该元素=e；
这是旋转=0；
this.panelCount=this.element.children（）.length；
this.panelSize=$（this.element）.children（）.first（）.outerHeight（）；
this.theta=360/this.panelCount；
this.radius=Math.round（（this.panelSize/2）/Math.tan（Math.PI/this.panelCount））
console.log（“创建的新菜单：panelCount=“+this.panelCount+”，panelSize=“+this.panelSize+”，theta=“+this.theta+”，radius=“+this.radius”）；
}
RotaMenu.prototype.update=函数（）{
对于（i=0；i


面板尺寸需要离开面板，而不是面板容器
需要按panelCount增加的半径
没有离轴旋转（至少还没有！）
如果我将rotateY改回rotateX使其垂直（就像我原来的帖子一样），它看起来几乎与我原来的截图相同。我用一把提琴更新了这篇文章，虽然有一些改进，但他们的布局还是错了，可能更糟。很抱歉我误读了你的文章——我以为你在水平重写方面遇到了麻烦，而不是垂直修改。我现在不在电脑旁，但稍后会看一看。同样的变化也要做很多。。你得到的面板大小是0实际上，看你的小提琴，看起来不错。再看看。。。您可能需要修改尺寸/间距。主要的视觉差异是我的在外部容器中使用透视图这看起来对吗？另外，使其动态化的目标之一是我不必担心大小和间距。你能详细解释一下你的意思吗？