Drawing an 3D Cube with Pure CSS - html

Question

I would like to transform this cube, see code below, to this one which you can see on the pictures, but I don't get it.
Actual Result:
CSS
<style type="text/css">
.cube-wrap {
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 100px;
-moz-perspective: 800px;
-moz-perspective-origin: 50% 100px;
-ms-perspective: 800px;
-ms-perspective-origin: 50% 100px;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 5s infinite linear;
-moz-transform-style: preserve-3d;
-moz-animation: spin 5s infinite linear;
-ms-transform-style: preserve-3d;
-ms-animation: spin 5s infinite linear;
transform-style: preserve-3d;
animation: spin 5s infinite linear;
}
.cube div {
position: absolute;
width: 200px;
height: 100px;
background: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 0 30px rgba(125, 125, 125, 0.8);
font-size: 20px;
text-align: center;
line-height: 100px;
color: rgba(0, 0, 0, 0.5);
font-family: sans-serif;
text-transform: uppercase;
}
.depth div.back-pane {
-webkit-transform: translateZ(-100px) rotateY(180deg);
-moz-transform: translateZ(-100px) rotateY(180deg);
-ms-transform: translateZ(-100px) rotateY(180deg);
transform: translateZ(-100px) rotateY(180deg);
}
.depth div.right-pane {
-webkit-transform: rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
-moz-transform: rotateY(-270deg) translateX(100px);
-moz-transform-origin: top right;
-ms-transform: rotateY(-270deg) translateX(100px);
-ms-transform-origin: top right;
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.depth div.left-pane {
-webkit-transform: rotateY(270deg) translateX(-100px);
-webkit-transform-origin: center left;
-moz-transform: rotateY(270deg) translateX(-100px);
-moz-transform-origin: center left;
-ms-transform: rotateY(270deg) translateX(-100px);
-ms-transform-origin: center left;
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.depth div.top-pane {
-webkit-transform: rotateX(-90deg) translateY(-100px);
-webkit-transform-origin: top center;
-moz-transform: rotateX(-90deg) translateY(-100px);
-moz-transform-origin: top center;
-ms-transform: rotateX(-90deg) translateY(-100px);
-ms-transform-origin: top center;
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.depth div.bottom-pane {
-webkit-transform: rotateX(90deg) translateY(100px);
-webkit-transform-origin: bottom center;
-moz-transform: rotateX(90deg) translateY(100px);
-moz-transform-origin: bottom center;
-ms-transform: rotateX(90deg) translateY(100px);
-ms-transform-origin: bottom center;
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.depth div.front-pane {
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
transform: translateZ(100px);
}
</style>
HTML
<div id="page">
<div id="contentHolder">
<div style="height: 100px; margin-top: 40px;">
<div class="cube-wrap">
<div class="cube depth">
<div class="front-pane"></div>
<div class="back-pane"></div>
<div class="top-pane"></div>
<div class="bottom-pane"></div>
<div class="left-pane"></div>
<div class="right-pane"></div>
</div>
</div>
</div>
</div>
</div>
Demo Fiddle: http://jsfiddle.net/YT6hd/
Expected Output:

Answer 1

This should help, you'll have to play around with the values a little bit:
http://jsfiddle.net/YT6hd/1/
.cube.depth {
-webkit-transform: rotateY(45deg);
}
.cube-wrap {
-webkit-perspective: 8000px;
-webkit-perspective-origin: 20% 2000px;
}
Of course you'll need all the browser prefixes, I use chrome so I added -webkit-