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

Question

更新:我已经清理了很多(我认为)，但它似乎也更糟。这是一个带有一些附加功能的 fiddle ，例如使用箭头键旋转对象。这样更容易发现问题。

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

---

原始问题

我正在尝试使用 JQuery 基于 tutorial and demo here 动态创建 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;
}

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

这是有 6 个 child 的样子。我做错了什么？

Answer 1

已更新

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

解决方案

我认为您的主要问题是您缺少一些 css，这些 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
• 没有离轴旋转(至少现在没有!)