Question

我今天做了一些实验，发现问题归结为transform: rotateY(180deg)和容器轮换transform-style: preserve-3d。我将再次描述细节。最初的问题是你可以忽略它。

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

代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

我想做什么：页面上有一个标记，其中包含一个div和一个img标记。 img代表正面，而div代表背面。当卡面向前方时，用户只能看到img。当卡面朝后（通过悬停），用户可以通过div的透明背景看到img和div的背面。

我的代码是：

＆＃13;

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

＆＃13;

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

＆＃13;

正如您所看到的，如果您将div悬停在img上，div仅覆盖部分div。如果我将div的宽度增加到267px，那么section将会消失＆＃39;。事实上，经过一些实验，str.split()在宽度达到str.startswith()宽度的2/3后会消失。我认为问题可能与旋转有关，但我无法弄清楚。请帮我。谢谢！

Answer 1

为了在＆＃34;转向前方时保持背面可见＆＃34;两个元素（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;
}

Answer 2

我仍然无法在测试中看到问题。但是你描述的问题可能是一个z战斗问题。 z-fight explained。如果是这种情况，您可以解决它将div放在该部分的前面：

＆＃13;

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

＆＃13;

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

＆＃13;

由元素旋转和变换样式引起的显示不一致：preserve-3d

2 个答案: