最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - HTML5CSS3 Rotating 3D Cube - Stack Overflow

programmeradmin6浏览0评论

I have logo like below ..

In that there is 3D cube with different color faces. I need to make that cube rotate using HTML5/CSS3. Also it should work on all modern browsers.

I found sample code with 3d cube. It works well on Chrome, Firefox and IE. .

Now i need to set different color for each face in the cube, Make it auto rotating and place it on top of image (logo text).

How to do it ?

In the sample code with pre3d same color is used for whole cube.

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

I have logo like below ..

In that there is 3D cube with different color faces. I need to make that cube rotate using HTML5/CSS3. Also it should work on all modern browsers.

I found sample code with 3d cube. It works well on Chrome, Firefox and IE. http://html5example/entry/html5-canvas/html5-canvas-pre3d-rotating-cube.

Now i need to set different color for each face in the cube, Make it auto rotating and place it on top of image (logo text).

How to do it ?

In the sample code with pre3d same color is used for whole cube.

renderer.fill_rgba = new Pre3d.RGBA(1, 0, 0, 1);
Share Improve this question edited Mar 15, 2014 at 14:20 ChamingaD asked Mar 15, 2014 at 12:29 ChamingaDChamingaD 2,92810 gold badges37 silver badges58 bronze badges 4
  • You could use an animated gif rather than HTML5/CSS. Draw your cube and light it in a free application like blender, animate and save. – Xotic750 Commented Mar 15, 2014 at 13:02
  • Otherwise the example that you pointed to uses the pre3d library. – Xotic750 Commented Mar 15, 2014 at 13:19
  • @Xotic750 i also was thinking about that. but sharpness and quality wont be good right ? – ChamingaD Commented Mar 15, 2014 at 14:18
  • 1 Looks fine to me. blog.3dstuffmaker./wp-content/uploads/2012/08/… – Xotic750 Commented Mar 15, 2014 at 15:32
Add a ment  | 

3 Answers 3

Reset to default 2

This one should be helpful for you

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

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

Take a look this inspiring tutorial which will be very helpful for you.

http://davidwalsh.name/css-cube

Take a look at here: Rotating Cube

Or search for other examples on that site!!

Though not exactly CSS3 but There is a Javascript plugin named three.js. You can try it once. Link is given below.

  1. three.js
  2. Another example of three.js
发布评论

评论列表(0)

  1. 暂无评论