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);

• javascript
• html
• css
• svg

• 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

3 Answers 3

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