全屏响应式的3D CSS3立方体底部关闭

Question

我有一个全屏的CSS3立方体，它是响应式的并且可以旋转，但是我无论如何都解决不了立方体底部的问题。它的位置不正确，我很确定这与我为其编写的translateZ JavaScript有关，但我可能错了。当您调整浏览器宽度时，您可以在加载时看到它，但底部的问题变得非常明显。非常感谢您的帮助。以下是问题的示例：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();
    });    



});

- loriensleafs

---

“#cube .bottom”选择器的变换设置在哪里？我看到有5个，但没有底部的一个。 - kolenda

它们并不重要，因为它是通过JavaScript进行设置的。 - loriensleafs

我只是为了参考而保留CSS。 - loriensleafs

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>

这意味着上下距离为402像素(面的高度)。

因此，顶部和底部的translateZ应该是那个值的一半(201像素)，而不是其他边缘的113.5像素。

现在，你的顶部面是正常的，所以也许更好的解决方案是，不是将顶部和底部都平移201像素，而是将底部平移402像素-113.5像素(面的高度减去顶部的平移量)。

我进行了以下更改：

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

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

结果是这个

为什么上面的板子有效？

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

这意味着将面置于中心相同距离处将适用于侧面（在垂直投影中，平行六面体是一个立方体）；将适用于顶面（它被对齐以使其起作用），但是底部会失败

为什么在Javascript中为立方体设置变换时按钮停止工作？

通过将不同的类设置给立方体div来使按钮工作。这些类在CSS中具有预计算的变换，例如：

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

如果您直接在方块样式上设置转换，那么这将具有更高的优先级，改变类是无用的。

也许您可以仅稍微缩小立方体的尺寸（仅通过javascript设置）；或更改所有动态应用的CSS样式...

- vals

---

那么，您将如何更改JavaScript以使其具有响应性？ - loriensleafs

实际上，如果这是真的，为什么顶部面板可以工作而底部不能？ - loriensleafs

抱歉，我应该发布修改后的 fiddle！ - vals

这太棒了，很有意义！我还有一个问题，我没有在原始问题中发布它，但如果您能帮我解决它，我将非常感激。现在整个立方体都比窗口大，当我执行$("#cube").css（{"-webkit-transform"："translateZ（"+（cubeWidth * -1）+"px）"}）;时，它解决了这个问题，但按钮不再起作用。 http://jsfiddle.net/H24EP/3/ - loriensleafs

很高兴能够帮到你。我已经添加了一个关于为什么上面的fiddle不起作用的解释。 - vals