間違った場所にボックスシャドーがありますtranslateZ

Question

これは私の最初の質問ですが、なぜこれを行うのか、これを回避する方法については何の答えも見つかりませんでした。

.baseの上にアイテム（.top）がありますが、シャドウがうまく見えません。 要素.topがどこにあるかは影が作成されたようです。 .topの影を.base要素にどのように投影できますか？

はあなたのすべてをありがとう:)

//for test purpose 
 

 
document.addEventListener("mousemove", function(e){ 
 
\t var mouseX = e.clientX/window.innerWidth*2-1; 
 
\t document.querySelector(".base").style.transform = "translate(-50%,-50%) rotateY("+-mouseX*90+"deg)" 
 
})

body{ 
 
\t background-color: #eee; 
 
} 
 
.base{ 
 
\t position: absolute; 
 
\t top:50%; 
 
\t left:50%; 
 
\t width: 200px; 
 
\t height: 200px; 
 
\t background-color: white; 
 
\t backface-visibility: visible; 
 
\t -webkit-perspective: 500px; 
 
    transform-style: preserve-3d; 
 
\t transform: 
 
\t \t translate(-50%,-50%); 
 
\t 
 
} 
 
.top{ 
 
\t 
 
\t position: absolute; 
 
\t top:50%; 
 
\t left:50%; 
 
\t height: 50px; 
 
\t width: 50px; 
 
\t border-radius:50%; 
 
\t 
 
\t background-color: blue; 
 
    transform-style: preserve-3d; 
 
\t transform: 
 
\t \t translate(-50%,-50%) 
 
\t \t translateZ(20px); 
 
    box-shadow: 0 0px 4px 4px #aaa; 
 
    
 
}

<div class="base"> 
 
    <section class="top"></section> 
 
</div>

Answer 1

.base上の疑似要素ではなく、.top要素の影にシャドウ効果を移動してみてください：

//for test purpose 
 

 
document.addEventListener("mousemove", function(e) { 
 
    var mouseX = e.clientX/window.innerWidth * 2 - 1; 
 
    document.querySelector(".base").style.transform = "translate(-50%,-50%) rotateY(" + -mouseX * 90 + "deg)" 
 
})

body { 
 
    background-color: #eee; 
 
} 
 

 
.base { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: white; 
 
    backface-visibility: visible; 
 
    -webkit-perspective: 500px; 
 
    transform-style: preserve-3d; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.base:after { 
 
    content: ""; 
 
    height: 40px; 
 
    width: 40px; 
 
    left: 80px; 
 
    top: 80px; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    box-shadow: 0 0px 8px 8px #aaa; 
 
    background-color: #aaa; 
 
    display: block; 
 
    transform: translateZ(1px); 
 
} 
 

 
.top { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    height: 50px; 
 
    width: 50px; 
 
    border-radius: 50%; 
 
    background-color: blue; 
 
    transform-style: preserve-3d; 
 
    transform: translate(-50%, -50%) translateZ(20px); 
 
}

<div class="base"> 
 
    <section class="top"></section> 
 
</div>