为什么正方体6个面没设透明度也是透明的，且正面不见了

想做一个骰子的效果

之前设置6个div不同颜色且半透明时还能看得见前面的1，把颜色改为全白不透明之后，1反而不见了，1是前面

<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
</body>

<style>
*{
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
perspective: 300px;
position: relative;
margin: 100px auto;
}

.box div {
width: 198px;
height: 198px;
border: 1px solid #000;
top: 0;
left: 0;
position: absolute;
font-size: 60px;
text-align: center;
line-height: 198px;
background-color: #fafafa;
}

.box div:nth-child(1) {
/* 前面 */
transform: translateZ(100px);
}

.box div:nth-child(2) {
/* 背面 */
transform: rotateY(180deg) translateZ(100px);
}

.box div:nth-child(3) {
/* 上面 */
transform: rotateX(90deg) translateZ(100px);
}

.box div:nth-child(4) {
/* 下面 */
transform: rotateX(-90deg) translateZ(100px);
}

.box div:nth-child(5) {
/* 左面 */
transform: rotateY(-90deg) translateZ(100px);
}

.box div:nth-child(6) {
/* 右面 */
/* background-color: rgba(118, 118, 118, 0.8); */
transform: rotateY(90deg) translateZ(100px);
}
</style>

大天使凉冰 2021-08-09

源自：2D与3D转换 2-12 空间移动

收起

1回答

好帮手慕然然回答被采纳获得+3积分 2021-08-09 16:37:28

同学你好，首先正方体的六个面不是透明的，同学设置的背景颜色是#fafafa，接近于白色，但不是透明色。

其次，所有的div盒子设置了绝对定位属性，后面的div盒子会覆盖前面的div盒子，所以第一个div盒子是被后面的div盒子遮盖住了，如图

建议：可以给第一个div盒子设置堆叠属性z-index，提高堆叠顺序，如图

祝学习愉快！

收起回答

大天使凉冰提问者 #1

1号面通过设置translateZ应该比其他5个面离观察者都要近，但近的面却盖不住远的面，需要用z-index来设置叠加顺序，所以translateZ只是让这个元素看起来移动得离观察者更近了，看起来更大了，但实际上并不是这个元素真的移动到了其他元素之前？

2021-08-10 10:36:44
好帮手慕然然回复提问者大天使凉冰 #2

同学你好，html代码中，在书写顺序上，1号div盒子位于最前面，在堆叠顺序上，1号div盒子位于最下面。所以在设置绝对定位属性后，1号div盒子被其他div盒子覆盖。translateZ只是改变了1号div盒子的所在位置，但是堆叠顺序没变，需要通过z-index属性来改变。
祝学习愉快！

2021-08-10 11:09:40
大天使凉冰提问者回复好帮手慕然然 #3

所以transform并没有真的让这些div变得立体，只是通过一些变形，让图形看起来是3D的，但实际上还是2D平面的，就如同在一张纸上画3D图形，看起来立体，实际上还是一张纸。因为所有div都叠在一张纸上，所以还是得用z-index体现前后顺序。
比如这个例子中，我不断增加rotateY()的度数，如果是个三维立体的图形，转到快90度时应该是骰子6那面转到面朝观察者，但实际效果是图形像一张纸一样，转到90度就成一条线了。如果是是三维的骰子，rotateY(180deg)时，应该是原先背面的2正对观察者，但如果1那面设过z-index，即使转了180度，还是1面覆盖其他面。
有没有什么方式可以让图形真的变成立体的呢？

2021-08-10 12:51:16