Nested backface-visibility is not hidden

Question

I've got a problem with "nested" backface-visibility.

I would like to have a flipping div, with content on both sides. For that, I use two div flipping, each one representing a face of my "two-faces" div (.face and .back).
The rotation works well.

Now, I want to hide their container, and reveal it when the page is loaded with another flip. But as you can see, my .face div is visible.

How could I avoid .face to be visible before my animation?

Here's the shorten working example I could made (Chrome favor):

.flip {
  position: relative;
  backface-visibility: hidden;
  transform: rotateX(180deg);
  animation: init 1s ease 2s 1 normal forwards;
}
.flip div {
  backface-visibility: hidden;
  transition: 1s;
  margin: 0;
  padding: 20px;
  border: 1px solid;
  width: 200px;
  text-align: center;
}
.back {
  position: absolute;
  top: 0;
  left: 0;
}
.face,
.flip:hover .back {
  transform: rotateX(0deg);
}
.flip:hover .face,
.back {
  transform: rotateX(180deg);
}

@keyframes init {
  from { transform: rotateX(180deg); }
  to   { transform: rotateX(0deg); }
}

<div class="flip">
  <div class="face">FACE</div>
  <div class="back">BACK</div>
</div>

Answer 1

If you want it to work in a nested way, you need the property

  transform-style: preserve-3d;

in he parent:

.flip {
  position: relative;
  backface-visibility: hidden;
  transform: rotateX(180deg);
  transform-style: preserve-3d;
  animation: init 1s ease 2s 1 normal forwards;
}
.flip div {
  backface-visibility: hidden;
  transition: 1s;
  margin: 0;
  padding: 20px;
  border: 1px solid;
  width: 200px;
  text-align: center;
}
.back {
  position: absolute;
  top: 0;
  left: 0;
}
.face,
.flip:hover .back {
  transform: rotateX(0deg);
}
.flip:hover .face,
.back {
  transform: rotateX(180deg);
}

@keyframes init {
  from { transform: rotateX(180deg); }
  to   { transform: rotateX(0deg); }
}

<div class="flip">
  <div class="face">FACE</div>
  <div class="back">BACK</div>
</div>