Full snapshot responsive 3d css3 cube bottom off

Question

I have a full-screen css3 cube that reacts and rotates, BUT the one thing I can't for life that I figured out is the bottom side of the cube. It does not position correctly, and I'm sure that this is due to the javascript translateZ I wrote, but I could be wrong. You can see that it is loaded, but it becomes very clear what is wrong from the bottom when you resize the browser. Thanks so much for any help with this. Here is the problem scenario:

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 do not have a cube, but a parallelogram.

Your style

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

This means that the distance between the top and bottom is 402px (face height).

So, the translation of Z above and below should be half of this (201 px) instead of 113.5 px, as for other sides.

Right now, your upper face is fine, so it might be a better solution, instead of translating the upper and lower 201px, you would translate the lower 402px to 113.5px (face height minus the top translation

Made the following changes:

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

and the result of this

Why does the top panel work?

You take a point in the center of the box, which is the center of the cube, measuring the size of the maximum inner cube and attached to the vertex.

This means that placing the faces at the same distance from the center will work for the side faces (in the vertical projection, the box is a cube); will work on the upper bound (it is assigned so that it works), but will not be executed on the lower bound

Why, when you set the conversion to a cube in Javascript, do the buttons stop working?

Buttons work by setting different classes in a cube div. These classes have precalculated CSS transformations, for example:

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

If you set the transform directly in the cube style, this takes precedence, and changing the class is useless.

Perhaps you could just set the cube sizes (which are set only with javascript) a little less; or change all dynamically applied CSS styles ...