使用jquery动态构建元素的3d圆柱体

更新：我已经清理了很多（我认为），但它似乎也更糟。 这是一个小提琴，其中包含一些附加function，例如使用箭头键旋转对象。 这样可以更容易地看到问题。

https://jsfiddle.net/scottbeeson/ue4c7ocj/

---

原始问题

我正在尝试使用JQuery动态创建3D垂直轮播，基于此处的教程和演示 。 我试图尽可能从基本和动态开始，但它并没有聚集在一起（字面意思）。

这是我有的：

function RotaMenu ( e ) { this.element = e; this.rotation = 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("Created new menu: panelCount=" + this.panelCount + ", panelSize=" + this.panelSize + ", theta=" + this.theta + ", radius=" + this.radius); } RotaMenu.prototype.update = function() { this.theta = 360 / this.panelCount; this.radius = Math.round( ( this.panelSize / 2) / Math.tan( Math.PI / this.panelCount ) ); for ( i = 0; i < this.panelCount; i++ ) { panel = $(this.element).children()[i]; angle = this.theta * i; $(panel).css('transform','rotateX(' + angle + 'deg) rotateY(0deg) translateZ(' + this.radius + 'px)'); } }; $(function() { var mainmenu = new RotaMenu($('#mainmenu')); mainmenu.update(); }); 

 .rmenu { margin-top: 100px; } .rmenu div { border: 1px solid gray; width: 100px; height: 20px; } 

  
 
1
 
2
 
3
 
4
 
5
 
6
  

这是6个孩子的样子。 我究竟做错了什么？

Answer 1

更新

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

解

我认为你的主要问题是你缺少一些css，这使得更容易获得基本结构，所以你可以调试它。 您还需要外部容器，以便可以为透视图添加摄像机点，以使变换看起来很漂亮，否则它看起来很平坦。

这是我的样本： https ： //jsfiddle.net/8ymm7xu6/2/

重要的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的变化

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

• panelSize需要关闭面板，而不是面板容器
• radius需要通过panelCount增加
• 没有轴外旋转（至少还没有！）