Question

我正在摆弄CSS3观点＆amp;转换。从this great 3D cube example开始，我想修改立方体，使其不仅围绕其中心旋转，而且还可以在其边缘滚动。

我通过围绕z轴旋转立方体来实现第一个左倾斜，-webkit-transform-origin: bottom left（see fiddle;示例仅限于左倾斜以简化）。对于随后的左倾斜，我正在努力如何进一步调整原点。从概念上讲，我需要设置相对于父容器的原点（即对于连续的左倾斜，它应该以200px的步长逐渐向左移动。）

非常感谢任何帮助！

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小提琴：http://jsfiddle.net/DigitalBiscuits/evYYm/20/

希望这能帮到你！

Answer 2

我认为本教程可能会对您有所帮助。

http://desandro.github.io/3dtransforms/docs/cube.html

如果要翻转其边缘，只需旋转Z和translateX即可。但是你想要旋转多快，你可能需要计算它。

http://desandro.github.io/3dtransforms/examples/cube-02-show-sides.html

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

2 个答案: