简体繁体 English

CSS3 & HTML5 - 旋转对象组

[英]CSS3 & HTML5 - Rotating group of objects

原文 2011-11-21 16:25:00 7 1 javascript/ html/ css

I have a project in which I have a draggable objects.我有一个项目，其中有一个可拖动的对象。 After I place those object I want to create a "camera view" in which I can change the angle of view.放置这些对象后，我想创建一个“相机视图”，我可以在其中更改视角。 (form 2d to 3d) （形式 2d 到 3d）

I'm trying all kinds of combinations (CSS3-rotate3d, HTML5-canvas) or maybe JavaScript.我正在尝试各种组合（CSS3-rotate3d、HTML5-canvas）或 JavaScript。

Is anybody knows what is the best way to build the solution?有人知道构建解决方案的最佳方法是什么吗？

1 个解决方案

Using JavaScript to drive a CSS3 rotate3d transform is probably your best bet, as in this demo .使用 JavaScript 来驱动 CSS3 rotate3d 转换可能是您最好的选择，如本演示中所示。

Using canvas would require somehow re-drawing your draggable items in the canvas, which may be easy, or extremely difficult, depending on what they are.使用画布需要以某种方式在画布中重新绘制可拖动的项目，这可能很容易，也可能非常困难，具体取决于它们是什么。 If they are all images, drawing them into the canvas and rotating them with WebGL would be doable.如果它们都是图像，将它们绘制到画布中并使用 WebGL旋转它们将是可行的。 Drawing arbitrary DOM elements into a canvas is probably extremely difficult.将任意 DOM 元素绘制到画布中可能非常困难。

The rotate3d CSS3 transform is probably easier to implement, but I suspect it has less support than WebGL. rotate3d CSS3 转换可能更容易实现，但我怀疑它的支持比 WebGL 少。 rotate3d works in at least Chrome and Safari, but WebGL has pretty slim support as well. rotate3d 至少适用于 Chrome 和 Safari，但 WebGL 的支持也非常有限。

Hope this helps!希望这可以帮助！