Html css 3D变换元素在垂直于查看器时消失

html元素，是二维的， 有宽度和高度，但没有厚度。甚至连一个像素都没有

因此，当对元素应用三维变换时，如果元素垂直于查看器旋转，则元素将消失

是否可以设置一些属性来纠正这种情况

---

如果元素在3d中旋转，浏览器似乎应该将元素计算为1像素厚。

我不知道这个解决方案是否适用于您的情况，因为您的问题中缺少细节

但是，在一般情况下，可以通过向正在旋转的元素添加边框来执行此操作

有一个例子：。在本例中，我添加了一个蓝色边框（与旋转的div颜色相同）

HTML:

---

你能出示你的密码吗？

<div class="container">
    <div class="rotateY r45deg"></div>
</div>

<div class="container">
    <div class="rotateY r90deg"></div>
</div>

.container {
    width: 200px;
    height: 200px;
    margin: 50px;
    border: 1px solid #ccc;
    -webkit-perspective: 400;
}

.rotateY {
    width: 100%;
    height: 100%;
    background-color: #00f;
    border: 1px solid #00f;
}

.r45deg { -webkit-transform: rotateY(45deg); }
.r90deg { -webkit-transform: rotateY(90deg); }