javascript - HTML5/CSS3 旋转 3D 立方体

标签 javascript html css svg

我有如下标志..

enter image description here

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

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

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

怎么做?

在 pre3d 的示例代码中,整个立方体使用相同的颜色。

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

最佳答案

这个应该对你有帮助

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

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

看看这个鼓舞人心的教程,它会对你很有帮助。

http://davidwalsh.name/css-cube

关于javascript - HTML5/CSS3 旋转 3D 立方体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22423814/

相关文章:

html - 如何从 PHP 对齐同一行上的两个元素

javascript - 基于内容高度的 iFrame PDF 滚动

javascript - 在 Firestore 中,如何查询在某个日期范围内创建的项目并按不同字段排序?

javascript - 保护联系表单中的部分输入文本框

html - 使用CSS在按钮中居中图像

html - 如何防止文本重叠导航栏?

javascript - 使用webpack时如何移动 "index.html"?

javascript - 如何验证登录页面?

html - ipad 上带有 div 的复选框标签不可点击

jquery - 为什么此页面的内容向左/向右移动了几个像素?