HTML5/CSS3 旋转的 3D 立方体

Question

我有以下类似的标志..

在这里有一个带有不同颜色面的3D立方体。 我需要使用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);

- ChamingaD

---

你可以使用动态的 gif 而不是 HTML5/CSS。在像 blender 这样的免费应用程序中绘制你的立方体并照亮它，然后进行动画制作并保存。 - Xotic750

否则，你指向的示例使用了 pre3d 库。 - Xotic750

@Xotic750 我也在考虑这个问题。但是锐度和质量不会好，对吧？ - ChamingaD

我觉得看起来不错。http://blog.3dstuffmaker.com/wp-content/uploads/2012/08/5-cube-3d-animated-gif-images1.gif - Xotic750

Answer 1

这些链接可能对您有所帮助：

- http://codepen.io/cliffpyles/pen/LHlqa - http://desandro.github.io/3dtransforms/docs/cube.html - 这篇启发性教程会非常有用：http://davidwalsh.name/css-cube

- Mo.

---

3D CSS变换似乎还没有得到广泛支持，在FFv27中可以工作，但在Chromium v27中无法工作。即使是2D，在我尝试的最新版本Opera上也无法工作。我猜这取决于OP所说的“应该在所有现代浏览器上工作”的含义。 - Xotic750

@Xotic750，你可以通过http://jsfiddle.net/展示你的努力，这样我可以根据迄今为止的工作给你提供良好的指导。 - Mo.

为什么我需要提供一个 jsFiddle，而你提供的链接已经足够进行测试了呢？当我使用 Chromium v27（这是一个现代浏览器，在我的操作系统上是最新版本）访问时，3D CSS 不被支持，我看到 抱歉，您的浏览器不支持 CSS 3D 变换。请尝试在 Safari、Chrome、Firefox Aurora 或 iOS 设备上查看此页面。 而从你提供的最新链接中可以看出，IE10 和 IE11 仅部分受支持，它们也是现代浏览器，不是吗？ - Xotic750

Chromium v27稳定版的发布日期为2013年6月11日，距今不到一年。 - Xotic750

并不是每个人都能（或被允许）生活在“前沿”，但这并不是我对现代浏览器的定义。而且，正如您提供的链接中所述，所有这些CSS方法仍然是草案。 - Xotic750

Answer 2

请看这里：Rotating Cube">旋转立方体

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

- lkoenigsberger

---

谢谢。我会检查一下。给定的立方体在IE 11上不起作用。 - ChamingaD

可能是因为IE需要-ms-* CSS前缀。也许这些CSS3属性需要此前缀。尝试添加它们并检查。 - José Cabo

Answer 3

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

1. three.js
2. 另一个three.js的例子

- Raja