无法使用背面可见性隐藏元素的背面：隐藏

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-visibilty:hidden上的{p> .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 2

因为您必须在指定backface-visibility：

的位置旋转图像

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

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