CSS 3d cube with rounded corners – 3d dice

 CSS3  Add comments
Feb 262012
 
css3 3d cube rounded corners
css3 webkit transition transform rounded pure CSS keyframes dice 3d transform dice Demo cube CSS3 CSS styling CSS border.radius animation amazing 3d CSS 3d cube with rounded corners 3d dice

css 3d cube

A CSS 3d cube? Yes… I’ve seen quite a few versions of a CSS 3d cube. Here are some examples.

Paul Hayes

Loe Lambert

desandro

net tuts +

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.

css3 webkit transition transform rounded pure CSS keyframes dice 3d transform dice Demo cube CSS3 CSS styling CSS border.radius animation amazing 3d CSS 3d cube with rounded corners 3d dice

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.

css3 webkit transition transform rounded pure CSS keyframes dice 3d transform dice Demo cube CSS3 CSS styling CSS border.radius animation amazing 3d CSS 3d cube with rounded corners 3d dice

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

css3 webkit transition transform rounded pure CSS keyframes dice 3d transform dice Demo cube CSS3 CSS styling CSS border.radius animation amazing 3d CSS 3d cube with rounded corners 3d dice

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.

css3 webkit transition transform rounded pure CSS keyframes dice 3d transform dice Demo cube CSS3 CSS styling CSS border.radius animation amazing 3d CSS 3d cube with rounded corners 3d dice

let’s go crazy with the styles

css3 webkit transition transform rounded pure CSS keyframes dice 3d transform dice Demo cube CSS3 CSS styling CSS border.radius animation amazing 3d CSS 3d cube with rounded corners 3d dice

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)

DEMO

A tutorial is coming soon.

Sorry I am really busy at the moment but I hope you can enjoy the results.

css3 webkit transition transform rounded pure CSS keyframes dice 3d transform dice Demo cube CSS3 CSS styling CSS border.radius animation amazing 3d CSS 3d cube with rounded corners 3d dice

Incoming search terms:

css 3d cube,  css3 dice,  css dice,  css3 3d cube,  cube 3d css,  rolling Dice in css3,  desandro cube,  cube css 3d,  cube 3d slider css,  cube 3d css explorer,  css3 spinning cube,  dice js 3d,  example cube css,  solid angle 3d,  purecss 3d,  js 3d dice,  jquery slider tile,  jquery cube animation,  jquery 3d куб,  javascript dice spin animation,  html5 rolling dice,  html5 3d Dice,  transition cube css3,  css3 cube,  3d css dice,  3d css3 cube IE,  3d cube animation,  3d roll dice code,  3d transition html5,  3D куб с помощью только CSS,  

Gregor Adams

Hi, I am a web-programmer and frontend-developer from Germany. I specialize in CSS, HTML and JavaScript. As I am a huge fan and also a student of open-source, I try to help other programmers (especially newcomers) as much as I can. I am also very happy for "true" criticism. So feel free to ask any question you like and I will try to give the best possible answer.
  • Roel van Lierop

    Have you found a solution for IE10 yet? I’m trying to do the same thing, but i’m constantly running into walls with chrome (unclickable area’s) and IE10 (complete design failure) I’ve currently enabled the 3D mode for all browsers so you can check what i’m doing.

    • http://pixelass.com Gregor Adams

      I didn’t spend too much time on this but i guess I could look into it. I have a lot to do at the moment, so it could take a while.

  • http://circuitstune.com Shiku

    ohh really… very nice. but missing tutorial

  • Anurag Kumar

    can you just tell how to increase the size of the cube? it will be very gratefull.

    • pixelass

      the translateZ has to be relative to the height/width of a side
      height: 200px;
      width: 200px;
      transform: translate3d(0,0,100px);

      all sides are positioned in the middle, so obviously we have to push it half of it’s dimension into one direction and rotate it afterwards.

      I guess Desandro explains this very good. You can find the link at the top of the post.

      If you need the round corners too it might be a little tricky. The code for my example isn’t really clean. but the concept works pretty good.

      • Anurag Kumar

        ok thank u very much. just one more thing, on including this cube my rotating div is not working. i meant i have a div which rotates on click. but after including the cube it is not working. can u tell why?

        • pixelass

          there are some issues with click events on transforms. You should google about it or provide an example e.g. create a fiddle on http://jsfiddle.net that replicates your problem. often it helps to set the position to absolute or make sure the correct side is facing upwards.

          • Anurag Kumar

            OK one last question, how to increase the time of rotation of the cube? which parameter should i change? i want the cube to stay as it is for 5 sec and then move to other side and then again wait for 5 sec. and also i want that on launching the page the cube side is moving upwards. i want that also to wait for 5 seconds. how can i do that?