Reputation: 2928

HTML5/CSS3 Rotating 3D Cube

I have logo like below ..

enter image description here

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.net/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);

Upvotes: 4

Answers (3)

Reputation: 792

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

Upvotes: 1

Reputation: 27533

This one should be helpful for you

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

Upvotes: 2

Reputation: 143

Take a look at here: Rotating Cube

Or search for other examples on that site!!

Upvotes: 1