Question

我有一个响应和旋转的全屏css3立方体，但是我生活中无法解决的一件事就是立方体的底部。它没有正确定位，我很确定它与我为它编写的translateZ javascript有关，但我可能错了。你可以看到它的onload，但是当你调整浏览器的宽度时，底部会出现什么问题。非常感谢您对此的任何帮助。这是问题的一个小提琴：

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样式......

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

1 个答案: