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

Question

Here I have an image and a description inside a container.
I want when I flip the container, the image hides and the description shows up, so I used backface-visibility: hidden; on the image, but it didn't work.

.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

Because you have to rotate the image where you specified the 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>