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

Question

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

因此，当对一个元素应用 3D 变换时，如果它垂直于观察者旋转，它就会消失。

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

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

Answer 1

由于您的问题缺乏详细信息，我不知道此解决方案是否适用于您的情况。

但是，一般来说，您可以这样做，为正在旋转的元素添加边框。

有一个例子：http: //jsfiddle.net/4L8Ht/1/。在这种情况下，我添加了一个蓝色边框（与旋转的 div 相同的颜色）。

HTML：

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

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

CSS：

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