css - 元素旋转和transform-style导致显示不一致 : 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!这就是我发现的问题。是浏览器的bug吗？我在 Mac 上的 chrome 上测试了这个。

原始问题: 我正在阅读与此问题相关的 CSS:权威指南第 4 版第 8 章。

我想做的: 页面上有一个section标签，包含一个div和一个img标签。 img 代表正面，div 代表背面。当卡片正面时，用户只能看到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-fighting 问题。 z-fight explained .如果是这种情况，您可以解决它，将 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>