css - 如何设置 webkit-transform-origin 在其边缘滚动 3D 立方体？

Question

我正在摆弄 CSS3 透视图和转换。从这个很棒的 3D 立方体示例开始，我想修改立方体，使其不仅围绕其中心旋转，而且在其边缘滚动。

我通过围绕 z 轴旋转立方体来获得第一个左倾斜工作，使用-webkit-transform-origin: bottom left（见小提琴；为简单起见，示例仅限于左倾斜）。对于随后的左倾斜，我正在努力如何进一步调整原点。从概念上讲，我需要设置相对于父容器的原点（即对于连续的左倾斜，它应该以 200px 的步长逐渐向左游荡）。

任何帮助是极大的赞赏！

score 1 · Accepted Answer

我已经对此进行了尝试，我认为您需要研究可用的 css矩阵转换以获得您想要的结果。

不幸的是，它不像旋转那么简单，然后移动变换原点。发生的情况是立方体围绕该边缘旋转，但是如果您移动变换点，它会使用这个新的原点将先前的变换应用于立方体。

更重要的是，您还需要平移立方体的位置。您不能仅使用旋转来移动它。我认为矩阵应该可以解决所有这些问题（恐怕我对它们了解不多）

您可以看到我创建的修改后的 jsfiddle，其中立方体被旋转和平移。平移点虽然是中心，但看起来立方体并没有“滚动”。这是关键的额外代码：

...

//left
zAngle -= 90;
xPos -= 50;
//rotate and translate the position of the cube
$('#cube')[0].style["WebkitTransform"]="translateX("+xPos+"px) rotateZ("+zAngle+"deg)";

...

js 小提琴在这里：http: //jsfiddle.net/DigitalBiscuits/evYYm/20/

希望这对你有帮助！