无法隐藏具有 backface-visibility: hidden 的元素的背面

Question

我这里有一个容器内的图像和描述。
我想当我翻转容器时，图像隐藏并显示描述，所以我在图像上使用了backface-visibility: hidden;，但是没有用。

.scene {
  width: 200px;
  height: 150px;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform .4s;
}

.image,
.description {
  position: absolute;
  width: 100%;
  height: 100%;
}

.scene:hover .container {
  transform: rotateY(180deg);
}

.image {
  backface-visibility: hidden;
}

<div class="scene">
  <div class="container">
    <div class="description">
      Kurapica is an anime character.
    </div>
    <img class="image" src="https://preview.ibb.co/bO30hn/kurapika.jpg" alt="Kurapica">
  </div>
</div>

Answer 1

因为您必须在指定的位置旋转图像 backface-visibility:

.scene {
  width: 200px;
  height: 150px;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
}

.image,
.description {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform .4s;
}

.scene:hover .container .image {
  transform: rotateX(180deg);
}

.image {
  backface-visibility: hidden;
}

<div class="scene">
  <div class="container">
    <div class="description">
      Kurapica is an anime character.
    </div>
    <img class="image" src="https://preview.ibb.co/bO30hn/kurapika.jpg" alt="Kurapica">
  </div>
</div>

Answer 2

backface-visibilty:hidden on .image 将不起作用，因为您正在旋转 .container 而不是 .image...

因此旋转 .image 和 .description 而不是 .container 以获得所需的效果

.scene {
  width: 200px;
  height: 150px;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
}

.image,
.description {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform .4s;
}

.description {
  transform: rotateX(-180deg);
  background: red;
  display: flex;
  align-items: center;
  text-align: center;
}

.scene:hover .image {
  transform: rotateX(180deg);
}

.scene:hover .description {
  transform: rotateX(0deg);
}

<div class="scene">
  <div class="container">
    <div class="description">
      Kurapica is an anime character.
    </div>
    <img class="image" src="https://preview.ibb.co/bO30hn/kurapika.jpg" alt="Kurapica">
  </div>
</div>

Answer 3

您必须将转换后的元素 backface-visibility 设置为：

.scene:hover .container {
  transform: rotateX(180deg);
  backface-visibility: hidden;
}

无法隐藏具有 backface-visibility: hidden 的元素的背面

Can't hide the back face of an element with backface-visibility: hidden

css

css-transforms