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

css 3D变换元素在垂直于观察者时消失

1 个答案: