Skip to main content
se añadieron 168 caracteres en el cuerpo
Origen Enlace
Narciso Aifuz
  • 1.7k
  • 1
  • 7
  • 17

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 */
}

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 */.

Prueba con este:

.container-card {
  position: relative;
  transform-style: preserve-3d;
  transition: .7s ease; 
  perspective: 1000;
  /* -webkit-perspective: 1000 */
}

.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 */
}

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; 
  /* -webkit-transform: 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 */
}
Origen Enlace
Narciso Aifuz
  • 1.7k
  • 1
  • 7
  • 17

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 */.

Prueba con este:

.container-card {
  position: relative;
  transform-style: preserve-3d;
  transition: .7s ease; 
  perspective: 1000;
  /* -webkit-perspective: 1000 */
}

.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 */
}