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

Question

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

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

原始问题

我尝试使用基于tutorial and demo here的JQuery动态创建3D垂直轮播。我试图尽可能地从基本和动态开始，但它并没有聚集在一起（字面意思）。

这就是我所拥有的：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainmenu" class="rmenu">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

＆＃13;

＆＃13;

＆＃13;

以下是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更改

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

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需要关闭面板，而不是面板容器
• 需要通过panelCount增加的半径
• 没有离轴旋转（至少还没有！）