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

Question

我正在摆弄 CSS3 透视图和转换。从 this great 3D cube example 开始，我想修改立方体，使其不仅围绕其中心旋转，而且在其边缘上滚动。

我通过使用 -webkit-transform-origin: bottom left(see fiddle ；为简单起见，示例仅限于左倾斜)通过围绕 z 轴旋转立方体来实现第一个左倾斜。 .对于随后的左倾斜，我正在纠结如何进一步调整原点。从概念上讲，我需要设置相对于父容器的原点(即对于连续的左倾斜，它应该以 200 像素的步长逐渐向左移动)。

非常感谢任何帮助!

Answer 1

我已经试过了，我认为您需要查看 css matrix transformations可供您准确地获得您想要的。

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

此外，您还需要平移立方体的位置。您不能纯粹使用旋转来移动它。我认为矩阵应该可以解决所有这些问题(恐怕我对它们了解不多)

您可以看到我创建的修改后的 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 fiddle 在这里:http://jsfiddle.net/DigitalBiscuits/evYYm/20/

希望对你有帮助!