#a?{
perspective:800px;
width:500px;
height:?500px;
margin:?auto;
margin-top:?100px;
}
#b?{
transform-style:preserve-3d;
}
#b?>?div?{
position:?absolute;
}
#b?>?div:nth-of-type(1)?{
width:100px;
height:?100px;
background:?#0f0;
transform:translateZ(30px);
}
#b?>?div:nth-of-type(2)?{
width:?100px;
height:?100px;
background:?#f00;
transform:translateZ(-10px);
}<body>
<div?id="a">
<div?id="b">
<div></div>
<div></div>
</div>
</div>
</body>根據(jù)常規(guī)的層疊順序計算：紅色框應該是在綠色框的上面。加了translateZ之后就變成綠色框在上面，所以translateZ是不是有改變層疊順序的能力?
添加回答
舉報
0/150
提交
取消