box-shadow在错误的地方translateZ

Question

这是我的第一个问题，因为我没有找到任何关于它为什么会这样做或者如何解决这个问题的答案。

我在.base上有一个项目（.top），但阴影看起来不太好。 看起来阴影是在元素.top所在的位置创建的。如何在.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%);
	
}
.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);
    box-shadow: 0 0px 4px 4px #aaa;
  
}

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

Answer 1

尝试将阴影效果移动到.base上的伪元素，而不是.top元素上的阴影：

＆＃13;

＆＃13;

//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)"
})

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;