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