css 3d cube
A CSS 3d cube? Yes… I’ve seen quite a few versions of a CSS 3d cube. Here are some examples.
css 3d dice
A dice?… Isn’t a dice a cube? Well yes, of course a dice is a cube but a real dice has rounded corners… right?
Rounded corners are very easy to apply to a box using CSS’s border-radius but how about making a pure CSS 3d cube?. Well it’s generally not to hard to do right?. We can just make a cube and add a border radius to the sides. Voilà..? I guess this would do if you can live with the fact that it looks really crappy since the cube is not solid.
faking a solid cube
Well, as always when I find something that I haven’t seen before… I just can’t sleep, so I sat down (I really didn’t have to think about it too long) and started this project.
So what I basically did, was to make an inner and outer layer for each side. The outer side has a color and the inner side is plain white.
If you look closely you can still see “through” the cube. So the next step was to create a filling for the corners. I added a triangle in each corner with the same color as the inner layers of the cube’s sides (white).
So now when the cube rotates it “almost” looks as if it was solid. I am saying “almost” because you can see little gaps in certain angles but for a quick test … I am pretty happy with the result.
let’s go crazy with the styles
I developed this in webkit but I added Firefox 10 and
IE 10 support.
Look at the Demo if you’re using Safari, Chrome or Firefox 10. (Safari really does the best job here …Chrome is jerky when it comes to 3d transforms and css-transitions, Firefox can finally use 3d-transforms but it’s still buggy. Internet Explorer 10 should work too but it looks like preserve-3d is causing issues)
A tutorial is coming soon.
Sorry I am really busy at the moment but I hope you can enjoy the results.
Incoming search terms: