HTML5 / CSS3旋转3D立方体

Question

我有下面的徽标..

因为有三维立方体有不同颜色的面孔。我需要使用HTML5 / CSS3使该立方体旋转。它也适用于所有现代浏览器。

我找到了带有3d立方体的示例代码。它适用于Chrome，Firefox和IE。 http://html5example.net/entry/html5-canvas/html5-canvas-pre3d-rotating-cube。

现在我需要为立方体中的每个面设置不同的颜色，使其自动旋转并将其放置在图像顶部（徽标文本）。

怎么做？

在带有pre3d的示例代码中，整个多维数据集使用相同的颜色。

renderer.fill_rgba = new Pre3d.RGBA(1, 0, 0, 1);

Answer 1

看看这里： Rotating Cube

或在该网站上搜索其他示例!!

Answer 2

这个应该对你有所帮助

http://codepen.io/cliffpyles/pen/LHlqa

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

看看这个鼓舞人心的教程，对你非常有帮助。

<强> http://davidwalsh.name/css-cube

Answer 3

虽然不完全是CSS3但是有一个名为three.js的Javascript插件。你可以尝试一次。链接如下。

1. three.js
2. Another example of three.js