Fallo al voltear la tarjeta 3D durante el Hover

[quico5]

Código HTML:

 <div class="card3d">
          <div class="card">
            <div class="face front">Hola</div>
            <div class="face back">Adiós</div>
          </div>
        </div> 

Código:

.card3d {
  height: 300px; width: 200px;
  perspective: 1000px;
}
.card {
  position: relative;
  height: inherit; width: inherit;
  transition: all 5300ms;
  transform-style: preserve-3d;
}
.card3d:hover .card {
  transform: rotateY(180deg);
}
.card3d:hover .back {
  backface-visibility: visible;
}
.face {
  height: inherit; width: inherit;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}
.back {
  background-color: green;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}