CSS make cube with skew and rotate - html

Question

I am trying to make cube with 3 square divs and CSS.
The problem appears with the top side: I can't find a way to give it a proper shape.
Of course, it should be an easy way to do it with matrix or other stuff, but if there's a way to solve this problem using only skew and rotate, please provide it.
Thanks in advance.
html:
<div id='box' class='top'></div>
<div id='box' class='left'></div>
<div id='box' class='right'></div>
CSS:
#box {
width: 50px;
height: 50px;
}
.top {
background: #bbf;
margin: 40px 0 0 24px;
transform: rotate(-30deg) skewX(30deg); /* ??! */
}
.left {
background: #fbb;
transform: rotate(30deg) skewX(30deg);
display: inline-block;
margin: -11px 0 0 0;
}
.right {
background: #bfb;
transform: rotate(60deg) skewY(30deg);
display: inline-block;
margin: -11px 0 0 -11px;
}
EDIT: thanks to #rby, I reordered the layers a bit
See at jsfiddle

Answer 1

Here's one way to do it using only skew and rotate as you specified, but with a few additional modifications. First, and most important, arrange the order of your divs so that the div for the top box is first, followed by the two sides. The way you have it now, the top div (class third) is last. Then, the other modifications I did was to use a block display for the top div and add a left margin to it so that it is pushed in towards the side divs and reduce the top margin on the side divs from 50px to 10px. With these changes and your existing rotate, skewX transforms, you get a cube.
Here's the modified code - not to disrupt your code too much I simply created a new id called boxTop for the top box but it'd be best to restructure the rules.
The divs:
<div id='boxTop' class='third'></div>
<div id='box' class='first'></div>
<div id='box' class='second'></div>
The CSS:
#box {
width: 100px;
height: 100px;
margin-top: 10px;
display: inline-block;
}
#boxTop {
width: 100px;
height: 100px;
display: block;
}
.third {
background: #bbf;
margin-left: 50px;
transform: rotate(-30deg) skewX(30deg); /* ??! */
}
Hope this solves your problem.