正确翻译Z与旋转合作

Question

我正在尝试创建一些奇特的3D界面，但我发现，旋转3d空间的行为并不是我所期望的。

问题是： 绿色边框（在代码片段中）是容器，整个应该旋转。 它有一些影响所需的视角。

蓝色和黑色方块是3D空间中的2D图层。 通过围绕Y轴旋转容器应该旋转其所有内容，但是，通过给定的透视，而黑色和蓝色具有不同的Z轴，观察者应该看到，就像它们的位置正在改变。

出于演示目的，我创建了非常简单的纸质模型，显示了视角。注意背纸上的黑色标记和表示角度的阴影角度。

问题是，CSS不处理theese翻译元素的旋转并且一切都是平的，对象不会在彼此之间移动，即使已翻译（同时尝试translateY和translate3d） ，试过z-index ...

现在。我知道，我可以定义匹配图层的CSS类，将它们添加到我的元素中，并通过JS动态地改变它们对不同轴的平移来创建这种效果。

但是，我想找到正确处理3D空间的解决方案，而不是像这样覆盖它。

那么 - 是否有一些CSS方式，如何让它像它应该的那样工作？我错过了一些CSS翻译属性吗？

请参阅下面的代码段上的CSS行为和代码。

谢谢。

$( document ).on( "mousemove", function( event ) {
  var dw = $(document).width();
  var dh = $(document).height();
 
  var transformz = -5+ (event.pageX*(10/dw));
  var transformbgz = -1+ (event.pageX*(2/dw));
  var transformdirz = -1+ (event.pageX*(2/dw));
  var transformdiry = -1+ (event.pageY*(2/dh));

  var transformpy = -7+ (event.pageY*(14/dh));
  var transformbgpy = -1+ (event.pageY*(2/dh));

  $( "#divbg" ).css("top",transformbgpy-4+"%");
  $( "#divbg" ).css("left",transformbgz-10+"%");
//  $( "#div2" ).css("transform","rotate3d("+transformdiry+","+transformdirz+",0,"+Math.abs(transformz)+"deg)");
  $( "#div2" ).css("transform","rotateY("+transformz+"deg) rotateX("+transformpy+"deg)");
  /*    $( "#div3" ).css("transform","translateZ(-20px) rotateY("+transformz+"deg) rotateX("+transformpy+"deg)");*/



});

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.55);
}

body{margin:0; padding:0; overflow:hidden;}
#div1 {
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width:100%;
    border: 1px solid black;
    -webkit-perspective: 300px; /* Chrome, Safari, Opera  */
    perspective: 300px;
    overflow:hidden;
}
#divbg{position:absolute; top:0; left:-20%; width:120%; height:120%;
  background: url(https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-550412.jpg) 0% 0;
  background-repeat:no-repeat;

}


#div2 {
    width:300px;
    height:150px;
    position: absolute;
    top:10%;
    left:30%;
   border:1px solid #0F0;
 


}



#div3-black{
  position:absolute; top:70px; left:130px;
  width:100%;
  height:40px;
  background:black;
  border:1px solid #888;
  color:aqua;
  font-size:40px;
  text-shadow: 2px 2px 0px rgba(150, 150, 150, 1);
 z-index:1;
transform:translate3d(0px, 0px, -30px);




}


#div3-blue{
  position:absolute; top:30px; left:150px;
  color:yellow;
  background:aqua;
  position:absolute;
  top:60px;
  left:140px;
width:60px;
height:40px;
  font-size:40px;
  text-shadow: 2px 2px 0px rgba(150, 150, 150, 1);
  z-index:2;

transform:translate3d(0px,0px,50px);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
    <div id="divbg"></div>
    <div id="div2">
   <div id="div3-black"></div>
   
    <div id="div3-blue">
     
    </div>


    </div>
  </div>

Answer 1

你缺少的只是

transform-style: preserve-3d;

我也改变了你的片段，因为我的图片链接有问题

＆＃13;

＆＃13;

$(document).on("mousemove", function(event) {
  var dw = $(document).width();
  var dh = $(document).height();

  var transformz = -5 + (event.pageX * (10 / dw));
  var transformbgz = -1 + (event.pageX * (2 / dw));
  var transformdirz = -1 + (event.pageX * (2 / dw));
  var transformdiry = -1 + (event.pageY * (2 / dh));

  var transformpy = -7 + (event.pageY * (14 / dh));
  var transformbgpy = -1 + (event.pageY * (2 / dh));

  $("#divbg").css("top", transformbgpy - 4 + "%");
  $("#divbg").css("left", transformbgz - 10 + "%");
  //  $( "#div2" ).css("transform","rotate3d("+transformdiry+","+transformdirz+",0,"+Math.abs(transformz)+"deg)");
  $("#div2").css("transform", "rotateY(" + transformz + "deg) rotateX(" + transformpy + "deg)");
  /*    $( "#div3" ).css("transform","translateZ(-20px) rotateY("+transformz+"deg) rotateX("+transformpy+"deg)");*/



});

＆＃13;

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.55);
  transform-style: preserve-3d;
}

body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

#div1 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid black;
  -webkit-perspective: 300px;
  /* Chrome, Safari, Opera  */
  perspective: 300px;
  overflow: hidden;
}

#divbg {
  position: absolute;
  top: 0;
  left: -20%;
  width: 120%;
  height: 120%;
  background-image: linear-gradient(45deg, green, blue);
  background-repeat: no-repeat;
}

#div2 {
  width: 300px;
  height: 150px;
  position: absolute;
  top: 10%;
  left: 30%;
  border: 1px solid #0F0;
}

#div3-black {
  position: absolute;
  top: 70px;
  left: 130px;
  width: 100%;
  height: 40px;
  background: black;
  border: 1px solid #888;
  color: aqua;
  font-size: 40px;
  text-shadow: 2px 2px 0px rgba(150, 150, 150, 1);
  z-index: 1;
  transform: translate3d(0px, 0px, -30px);
}

#div3-blue {
  position: absolute;
  top: 30px;
  left: 150px;
  color: yellow;
  background: aqua;
  position: absolute;
  top: 60px;
  left: 140px;
  width: 60px;
  height: 40px;
  font-size: 40px;
  text-shadow: 2px 2px 0px rgba(150, 150, 150, 1);
  z-index: 2;
  transform: translate3d(0px, 0px, 50px);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <div id="divbg"></div>
  <div id="div2">
    <div id="div3-black"></div>

    <div id="div3-blue">

    </div>


  </div>
</div>

＆＃13;

＆＃13;

＆＃13;