jquery - 全屏响应 3d css3 立方体底部关闭

Question

我有一个响应式和旋转的全屏 css3 立方体，但我终生无法弄清楚的一件事是立方体的底部。它没有正确定位，我很确定它与我为它编写的 translateZ javascript 有关，但我可能是错的。您可以在加载时看到它，但是当您调整浏览器的宽度大小时，底部的问题就会变得非常清楚。非常感谢您对此的任何帮助。这是问题的一个 fiddle :

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

当窗口不是正方形时，您得到的不是立方体，而是平行四边形。

你的风格是

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

这意味着顶部和底部之间的距离为 402px(面的高度)。

因此，顶部和底部的 translateZ 应该是它的一半 (201 px) 而不是另一边的 113.5 px。

现在，你的顶面没问题，所以可能是更好的解决方案，而不是平移顶部和底部 201px，而是平移底部 402px - 113.5px(面的高度减去顶部的平移

我做了以下更改:

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

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

结果是this

为什么顶部面板可以工作？

您将一个点作为平行六面体的中心，该点是具有最大内部立方体尺寸并与顶部对齐的立方体的中心。

这意味着将面放置在距中心相同距离的位置将适用于侧面(在垂直投影中，平行六面体是立方体)；将适用于顶面(已对齐，因此可以使用)，但不适用于底部

为什么当您在 Javascript 中设置对多维数据集的转换时，按钮停止工作？

按钮通过为立方体 div 设置不同的类来工作。这个类在 CSS 中有预先计算的转换，像这样:

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

如果直接在立方体样式上设置转换，则优先级更高，更改类是没有用的。

也许您可以将立方体的尺寸(仅使用 javascript 设置)设置得更小一点；或更改所有动态应用的 CSS 样式 ...