Acabo de notar dos errores en CSS. Es posible que esto sea la causa, ya que mensionaste que al quitar container-card
, funciona.
En todos tus CSS están mal comentados. No debe ser con doble barra. Debe se encerrados entre barras y asteriscos: /* comentado */
Es que esta clase no está cerrada correctamente con la llave: }.
También, -webkit-perspective: 1000
y -webkit-backface-visibility: hidden
no están comentados correctamente.
El comentario que le pusiste, //, es para javascript.
Para comentar en CSS es con apertura y cierre de barra y asteriscos: /* comentado */
.
Editado
Le faltó encerrar entre paréntesis el pixel de la perspectiva; así: transform: perspective(1000px)
; y también el -webkit-
.
Prueba con este:
.container-card {
position: relative;
transform-style: preserve-3d;
transform: perspective(1000px);
transition: .7s ease;
perspective: 1000;
/* -webkit-perspectivetransform: 1000 perspective(1000px)*/
}
.container-card .container-back-card {
background-color: rgb(248, 246, 242);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden;
/* -webkit-backface-visibility: hidden */
}