CSSNERD

CSS at its best

CSS3

CSS 3d cube with rounded corners – 3d dice

by  on  • 8 Comments
 
4
SHARES

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.

 
4
SHARES

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,  
  • 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?