正确translateZ合作与旋转

Question

我想创建一些花哨的3D界面，但我发现，旋转3d空间的行为不是我所期望的。

问题是： 绿色有边的正方形（在片段中）是容器，整个都应该旋转。 它有一些视角需要的效果。

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

为了演示的目的，我创建了非常简单的纸模型来展示透视图。请注意底纸上的黑色标记以及显示角度的阴影角度。

的问题是，CSS不处理的旋转超过theese翻译元件和所有是平坦的，对象不彼此之间移动，即使翻译（尝试都translateY和translate3d），试z-index ...

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

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

那么 - 有没有一些CSS方法，如何使它像它应该工作？我错过了一些CSS翻译属性或东西？

查看下面snippet的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; 

我也改变了几分你的片断，因为我曾与图像链接

$(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); 
 
    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); 
 
}

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

问题0