javascript - HTML5CSS3 Rotating 3D Cube

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 asked Mar 15, 2014 at 12:29 ChamingaD 2,92810 gold badges37 silver badges58 bronze badges

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

Sorted by: 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.