元素旋转和变换样式导致的显示不一致:preserve-3d

Question

我今天做了一些实验，发现问题归结为transform: rotateY(180deg)和使用transform-style: preserve-3d的容器旋转。我将再次描述细节。原来的问题在下面，你可以忽略它

这一次，我将从一开始就在section上启用transform-style: preserve-3d;，这可以消除一些不相关的细节。

代码：

section {
position: relative;
width: 400px;
height: 300px;
transform-style: preserve-3d;
/*adjust deg here*/
transform: rotateY(0deg);
}
img,div {
position: absolute;
top: 0;
left: 0;
}
div {
width: 267px;
height: 300px;
transform: rotateY(180deg);
background: rgba(10, 10, 10, 0.6);
}

<section>
<img src="http://www.weekends.net.cn/assets/img/blur.jpg">
<div id="back">abc</div>
</section>

请将节标记的旋转度增加到180deg。然后div将消失。不要停止并继续增加，div会交替出现和消失，这会导致不一致性和不可预测性。更糟糕的是div的宽度会影响这种"不一致性"。例如，在rotateY()的参数设置为180deg后，将div的宽度减小1个像素，就会出现div！这就是我发现的问题。这是浏览器的错误吗？我在Mac上的chrome上测试了这个。

原始问题：我正在阅读与此问题相关的CSS第8章：最终指南第4版。

我想做的事：页面上有一个section标签，其中包含一个div和一个img标签。CCD_ 11表示前侧，而CCD_。当卡片正面时，用户只能看到img。当卡片面朝后(通过悬停)时，用户可以通过div的透明背景看到div和img的背面。

我的代码是：

section {
position: relative;
width: 400px;
height: 300px;
}
img,
div {
position: absolute;
top: 0;
left: 0;
}
div {
width: 200px;
height: 300px;
transform: rotateY(180deg);
backface-visibility: hidden;
background: rgba(255, 255, 255, 0.6);
}
section:hover {
transform: rotateY(180deg);
transform-style: preserve-3d;
}

<section>
<img src="http://www.weekends.net.cn/assets/img/blur.jpg">
<div id="back">abc</div>
</section>

正如你所看到的，如果你把鼠标悬停在div上，它只覆盖了img的一部分。如果我把div的宽度增加到267px，那么div就会"消失"。事实上，经过一些实验，div的宽度达到section宽度的2/3后就会消失。我认为这个问题可能与轮换有关，但我想不通。请帮帮我。谢谢！

Answer 1

我在测试中仍然看不到这个问题。但你所描述的问题可能是一个z战问题。z-fight解释道。如果是这种情况，您可以将div稍微放在部分前面来解决：

section {
position: relative;
width: 400px;
height: 300px;
transform-style: preserve-3d;
transform: rotateY(0deg);
transition: transform 5s;
}
img,div {
position: absolute;
top: 0;
left: 0;
}
div {
width: 267px;
height: 300px;
transform: rotateY(180deg) translateZ(1px); /* added the z translation */
background: rgba(10, 10, 10, 0.6);
}
section:hover {
transform: rotateY(180deg);
}

<section>
<img src="http://www.weekends.net.cn/assets/img/blur.jpg">
<div id="back">abc</div>
</section>

Answer 2

为了在"转向正面"时保持背面可见，两个元素(img和div#back)都需要有backface-visibility: hidden。但这在没有任何透明度的情况下是行不通的。

然而，我们可以通过在背面添加一个带有伪元素的翻转背景来作弊。

https://jsfiddle.net/oynpktxd/

div:before {
background-image: url("http://www.weekends.net.cn/assets/img/blur.jpg");
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transform: rotateY(180deg);
z-index: -1;
opacity: 0.4;
}