Webkit 3D CSS。像第一人称射击游戏一样旋转相机

Question

我想要实现的是像http://www.keithclark.co.uk/labs/3dcss/demo/这样的相机旋转。它并不完美，有时候相机坏了，但这就是主意。

我喜欢旋转与人类视图类似，但我只是设法在某个点上获得旋转。这是我获得http://jsfiddle.net/gaAXk/3/的一个例子。

正如我之前所说，我希望有一种像人一样的行为。

我也尝试过-webkit-transform-origin但没有更好的结果。

任何帮助/建议都将受到高度赞赏。

Answer 1

问题如下：

为了给出类似人类的行为，当视点移动时，你应该计算物体的x / y / z轴上的新位置（不仅仅是旋转角度）例如，旋转。

CSS转换应该以下面的方式工作，我们给一个场景提供一个透视，例如800px。然后，对象将是，Z位置高达800px ，如果Z位置是，例如1000px，它将在我们的观点后面，所以我们将无法看到元件。

那就是说，在轮换后你应该根据我们新的观点来计算物品的新位置。

更清楚我使用更简单的代码更新了您的示例（它只支持旋转，只有一个图像）：http://jsfiddle.net/gaAXk/12/

• 示例中的透视是 800px 。
• 图像最初位于 x = 0px，y = 0px，z = 0px 。所以它在我们面前以800px的“距离”可见。
• 当我们旋转视点时，元素应沿着视角的圆周移动，因此x，z位置和旋转角度元素，需要更新。

示例中的元素沿着圆周移动，半径为800px（ calculatePos（）函数可以解决问题。）

如果我们改变位置（如果视点更接近某些对象，并且更远离其他对象），则应更新相同的计算。

这不是那么微不足道。如果有人有更好的解决方案（我不是3D专家），我会很高兴听到一些。