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

[petit89]

¿y cual es el fallo??

[quico5]

El fallo es que al pasar el ratón se cruzan repentinamente las 2 caras delantera y trasera, y entonces en la rotación se ve como se rota de la trasea a la trasera, en vez de la delantera a la trasera, luego al retirar el ratón, la transición de rotar de la trasera a la delantera si es la corecta

[quico5]

Mi duda anterior deriba del tutorial siguiente... no se que pudiera estar haciendo direfente como para que se produzca ese fallo al basarme en el ejemplo:
https://www.youtube.com/watch?v=phZRpphXXVQ

He encontrado esta solución ahorrandome un div, y no me da el fallo de rotación
https://stackoverflow.com/questions/...-card-with-css