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)
Sorry I am really busy at the moment but I hope you can enjoy the results.
Incoming search terms:
css 3d cube, css3 dice, 3d куб в css, preserve 3d very hard, panagea cube csss, 3d cube css, css dice roll, css cube, 3d куб css, css 3d cube in ie10, dice website does no work in IE, div rounded corner HTML5, drawing a dice with css, html5 3d dice, html5 css rounded corner cube, jquery 3d box, jquery dice, 3d cube css3, 3d cube css on ie 10, rounded corner css 3d, yhs-per_003, анимация css3, куб css, dice transition html 5, dice implemetaion using css, css3cube, css 3d cube not working in IE 11, css 3d dice, animating css preserve 3d cube, css cube animation,