full scree responsive 3d css3 cube bottom is off

Question

I have a fullscreen css3 cube that is responsive and rotates, BUT the one things I cannot for the life of me figure out is the bottom side of the cube. It doesn't position correctly, and I'm pretty sure it has to do with the translateZ javascript I've written for it, but I could be wrong. You can see it onload, but it becomes very clear what's wrong with the bottom when you resize the browser's width. Thanks so much for any help with this. Here's a fiddle of the issue:

http://jsfiddle.net/H24EP/

html

<section id="options">
    <p id="show-buttons">
        <button class="show-front">FRONT</button>
        <button class="show-back">BACK</button>
        <button class="show-right">RIGHT</button>
        <button class="show-left">LEFT</button>
        <button class="show-top">TOP</button>
        <button class="show-bottom">BOTTOM</button>
    </p>
</section>    

<section class="container">
    <div id="cube" class="show-front">
        <figure class="front">1</figure>
        <figure class="back">2</figure>
        <figure class="right">3</figure>
        <figure class="left">4</figure>
        <figure class="top">5</figure>
        <figure class="bottom">6</figure>
    </div>
</section>

css

body { 
        margin:0px;
        padding:0px;
    }
    #options {
        position:absolute;
        top:0px;
        z-index:500;
    }
    .container {
      position: relative;
      margin: 0px;
      padding:0px;
      -webkit-perspective: 1600px;
      -moz-perspective: 1000px;
      -o-perspective: 1000px;
      perspective: 1000px;
      -webkit-backface-visibility: visible;
  }
  #cube {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 5s;
      -moz-transition: -moz-transform 1s;
      -o-transition: -o-transform 1s;
      transition: transform 1s;
  }
  #cube figure {
      margin: 0px;
      display: block;
      position: absolute;
      line-height: 196px;
      font-size: 120px;
      font-weight: bold;
      color: white;
      text-align: center;
  }
  #cube.panels-backface-invisible figure {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden;
  }
  #cube .front {
      background: hsla(0, 100%, 50%, .6);
  }
  #cube .back {
      background: hsla(60, 100%, 50%, .6);
  }
  #cube .right {
      background: hsla(120, 100%, 50%, .6);
  }
  #cube .left {
      background: hsla(180, 100%, 50%, .6);
  }
  #cube .top {
      background: hsla(240, 100%, 50%, .6);
  }
  #cube .bottom {
      background: hsla(300, 100%, 50%, .6);
  }
  #cube .front {
      -moz-transform: translateZ(100px);
      -o-transform: translateZ(100px);
      transform: translateZ(100px);
  }
  #cube .back {
      -moz-transform: rotateX(-180deg) translateZ(100px);
      -o-transform: rotateX(-180deg) translateZ(100px);
      transform: rotateX(-180deg) translateZ(100px);
  }
  #cube .right {
      -moz-transform: rotateY(90deg) translateZ(100px);
      -o-transform: rotateY(90deg) translateZ(100px);
      transform: rotateY(90deg) translateZ(100px);
  }
  #cube .left {
      -moz-transform: rotateY(-90deg) translateZ(100px);
      -o-transform: rotateY(-90deg) translateZ(100px);
      transform: rotateY(-90deg) translateZ(100px);
  }
  #cube .top {
      -moz-transform: rotateX(90deg) translateZ(100px);
      -o-transform: rotateX(90deg) translateZ(100px);
      transform: rotateX(90deg) translateZ(100px);
  }


  #cube.show-front {
      -webkit-transform: translateZ(-100px);
      -moz-transform: translateZ(-100px);
      -o-transform: translateZ(-100px);
      transform: translateZ(-100px);
  }
  #cube.show-back {
      -webkit-transform: translateZ(-100px) rotateX(-180deg);
      -moz-transform: translateZ(-100px) rotateX(-180deg);
      -o-transform: translateZ(-100px) rotateX(-180deg);
      transform: translateZ(-100px) rotateX(-180deg);
  }
  #cube.show-right {
      -webkit-transform: translateZ(-100px) rotateY(-90deg);
      -moz-transform: translateZ(-100px) rotateY(-90deg);
      -o-transform: translateZ(-100px) rotateY(-90deg);
      transform: translateZ(-100px) rotateY(-90deg);
  }
  #cube.show-left {
      -webkit-transform: translateZ(-100px) rotateY(90deg);
      -moz-transform: translateZ(-100px) rotateY(90deg);
      -o-transform: translateZ(-100px) rotateY(90deg);
      transform: translateZ(-100px) rotateY(90deg);
  }
  #cube.show-top {
      -webkit-transform: translateZ(-100px) rotateX(-90deg);
      -moz-transform: translateZ(-100px) rotateX(-90deg);
      -o-transform: translateZ(-100px) rotateX(-90deg);
      transform: translateZ(-100px) rotateX(-90deg);
  }
  #cube.show-bottom {
      -webkit-transform: translateZ(-100px) rotateX(90deg);
      -moz-transform: translateZ(-100px) rotateX(90deg);
      -o-transform: translateZ(-100px) rotateX(90deg);
      transform: translateZ(-100px) rotateX(90deg);
  }

JS

$(document).ready(function () {
    $("button").click(function () {
        var currentSide = $(this).attr("class");

        $("#cube").removeClass().addClass(currentSide);
    });





var dimensions = function() {    
    $(".front, .back, .left, .right").css({
        width: $(window).width(),
        height: $(window).height()
    });
    $(".top, .bottom").css({
        width: $(window).width(),
        height: $(window).width()        
    });

    $(".container").css({
        width: $(window).width(),
        height: $(window).height()
    });

    var cubeHeight = $(window).height() * ".5";
    var cubeHeightNeg = ($(window).height() * "1.1") * -1;

    var cubeWidth = $(window).width() * ".5";
    var cubeWidthNeg = ($(window).width() * ".5") * -1;

    /*$("#cube").css({    
      "-webkit-transform": "translateZ(" + (cubeWidth * -1) + "px)"
    });*/

    $("#cube .front").css({
      "-webkit-transform": "translateZ(" + cubeWidth + "px)"
    });    
    $("#cube .back").css({
      "-webkit-transform": "rotateX(-180deg) translateZ(" + cubeWidth + "px)"
    });
    $("#cube .right").css({
      "-webkit-transform": "rotateY(90deg) translateZ(" + cubeWidth + "px)"
    });
    $("#cube .left").css({
      "-webkit-transform": "rotateY(-90deg) translateZ(" + cubeWidth + "px)"
    });
    $("#cube .top").css({
      "-webkit-transform": "rotateX(90deg) translateZ(" + cubeWidth + "px)"
    });
    $("#cube .bottom").css({
      "-webkit-transform": "rotateX(-90deg) translateZ(" + cubeWidth + "px)"
    });
};
    dimensions();
    $(window).resize(function () {
        dimensions();
    });    



});

Answer 1

When the window is not square, you don't have a cube, but a paralelogram.

Your style is

<figure class="left" 
    style="width: 227px; 
    height: 402px; 
    -webkit-transform: rotateY(-90deg) translateZ(113.5px);">4
</figure> 
<figure class="top" 
    style="width: 227px; 
    height: 227px; 
    -webkit-transform: rotateX(90deg) translateZ(113.5px);">5
</figure>

That means that the distance between top and bottom is 402px (the height of the faces).

So, the translateZ of top and bottom should be the half of that (201 px) instead of 113.5 px as for the other sides.

Right now, your top face is ok, so may be the better solution, instead of translating both top and bottom 201px, would be to translate the bottom 402px - 113.5px (the height of the faces minus the translation of the top

I did the following changes:

var bottomTranslate = $(window).height() - cubeWidth;

$("#cube .bottom").css({
  "-webkit-transform": "rotateX(-90deg) translateZ(" + bottomTranslate  + "px)"
});

and the result is this

Why does the top panel work ?

You are taking as center of the parallelepiped a point that is the center of a cube having the dimensions of the maximum inner cube, and alligned to the top.

That means the placing the faces at the same distance of the center will work for the lateral faces (in vertical projection, the parallelepiped is a cube); will work for the top face (it's alligned so that this will work), but will fail for the bottom

Why when you set a transform to the cube in Javascript the buttons stop working ?

The buttons work by setting different classes to the cube div. This classes have precomputed transforms in the CSS, like this:

#cube.show-right {
    transform: translateZ(-100px) rotateY(-90deg);
}

If you set a transform directly on the cube style, this has higher priority and changing the class is useless.

May be you could just set the dimensions of the cube (that are set only with javascript) a little bit smaller; or change all the dynamically applied CSS styles ...