1

Buenas noches compañeros. Me gustaría preguntarles si a alguno le pasa que cuando abre su app en el navegador (en modo desarrollo) al hacer scroll por la pagina las letras salen todas raras cada vez que cargan la pagina y después se cambia y se ven normal. Esto me comenzó a pasar cuando agregue código css a las card para que estas tengan un efecto de rotación al pasar el mouse encima muestren más información en la parte de atrás de la card:

introducir la descripción de la imagen aquí

Observen como se normaliza la letra: introducir la descripción de la imagen aquí

Este es el código css que agregue en el componente:

//Estilizacion del contenedor de cada card del producto, lo que vamos hacer es rotar la card cuando se pase el mouse por encima y que al rotar se muestre más información en la parte de atras de cada card del producto:
.container-card {// Este contenedor es la parte delantera de la card
  position: relative;

  transform-style: preserve-3d;//Nos permite que al girar la card se muestre lo que está en la parte trasera de ella
  transition: .7s ease;//Con esta transision hacemos que se note el giro 
  perspective: 1000;//Esta propiedad nos permite que al girar las card estás tengan una perspectiva como de 3D en el giro.
  //-webkit-perspective: 1000;

  //Estilizamos el contenedor que va en la parte trasera de la card:
  .container-card .container-back-card{
  background-color: rgb(248, 246, 242);
  width: 100%;
  height: 100%;
  //El siguiente codigo es para que la parte trasera tome la misma posicion de su contenedor padre (el que tiene la parte delantera):
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;//Usamos esta propiedad para que cuando la parte de atras y delantera de la card gire pues que estás no se muestre
  //-webkit-backface-visibility: hidden;
  }
}
//Estelizamos para que la parte de atras de la cart rote 180 grados:
.container-back-card{
  transform: rotateY(180deg);//Rotamos 180 grados
}
.card-body:hover .container-card{//Cuando pasemos el mouse en toda la card vamos hacer el siguiente efecto para la card
  transform: rotateY(180deg);
}

me he dado cuenta al quitar las clases en el html para que estos no cojan esa estilización que las letras se ven normales cuando cargo la pagina. Será alguna propiedad que agregue allí en el código css que está en desuso?: introducir la descripción de la imagen aquí Este es el codigo HTML para la creacion de esos productos:

<div class="text-center mb-3">
  <div class="card-body">
    <div class="container-card"><!--Este container será la parte delantera de la card-->
      <img [src]="product.imageUrl" class="card-img-top" alt="producto">
      <h4>{{ product.name }}</h4>
      <p >{{ product.description }}</p>
      <!--Este container ira en la parte de atras de cada card de productos:-->
      <div class="container-back-card">
        <p><strong>Ver más detalle:</strong></p>
        <!--Dependiendo de la card que el usuario pase con el mouse se mostrara el detalle respectivo a ese producto:-->
        <ul *ngIf="product.name =='Lamparas de mesa'">
          <li>Color: crema</li>
          <li>Estilo:   Industrial</li>
          <li>Material: Metal, tela</li>
          <li>Marca:    VerRon</li>
          <li>Características especiales: Luces duales, Regulable de 3 vías, Control táctil e interruptor giratorio</li>
        </ul>
        <ul *ngIf="product.name =='Sofa cama'">
          <li>Dimensiones del producto: 27.95"D x 37.01"W x 17.32"H pulgadas</li>
          <li>Tipo de sala: Office</li>
          <li>Color:    Amarillo</li>
          <li>Factor de forma:  Convertible, Sleeper</li>
          <li>Material: Lino Acero de aleación</li>
        </ul>
        <ul *ngIf="product.name =='Alfombra negra'">
          <li>Color: Gris y azul teñido</li>
          <li>Forma de la alfombra: Area Rug</li>
          <li>Talla:    5x7 Feet</li>
          <li>Dimensiones del producto: 84"L x 60"W pulgadas</li>
          <li>Patrón:   Tie Dye</li>
        </ul>
        <ul *ngIf="product.name =='Mesa de centro'">
          <li>Diseño de mesa:   Mesa de centro</li>
          <li>Dimensiones del producto: 37"D x 23"W x 12"H pulgadas</li>
          <li>Tipo de sala: Living Room</li>
          <li>Tipo de conexion: Enchufe de 110 V.</li>
          <li>Estilo:   Moderno</li>
        </ul>
        <ul *ngIf="product.name =='Letrero decorativo'">
          <li>Color:    Gris</li>
          <li>Marca:    Buecasa</li>
          <li>Material: Madera</li>
          <li>Tema: Rustic,Farmhouse</li>
          <li>Uso en interiores y exteriores:   Interiores</li>
        </ul>
      </div>
    </div>
  <div class="container-price">
    <p class="card-text">{{ product.price | currency }}</p>
    <button href="#" class="btn btn-outline-success" (click)="addToCart()">
      <i class="fas fa-cart-plus"></i> Add to Cart
    </button>
  </div>
  </div>
</div>

Alguien sabe porque pasa esto, alguna solución, la verdad me gustaría conservar el efecto de rotación que le añade ese código css a las card. Agradezco muchísimo cualquier ayuda

Pd: Estoy usando Angular y en el archivo de styles global he añadido una fuente y un tamaño como para probar porque el proyecto aun no tiene declarado un font-family por ningun lado, estoy trabajando con la fuente por defecto. ya he revisado los demás archivos de estilos de cada componente para ver si he declarado de pronto un font-family en algún lado pero no.

5
  • 1
    En el código CSS que muestras no hay problemas de fuentes. Debe ser otra hoja de estilos, otro archivo .css que tiene los estilos de fuentes de una manera, y en otro lado, otro tipo de fuente. Entonces, cuando la página carga, se encuentra con el primer tipo de fuente y muestra; luego encuentra el otro tipo de fuente y carga y se queda con eso. Lleva en cuenta que CSS es una hoja de estilos en cascada: el navegador carga y muestra el primer estilo, y luego el siguiente, y luego el siguiente. Commented el 3 abr. 2022 a las 0:51
  • 1
    Revisa todos tus archivos CSS y hubica dónde hay font-family o @font-face y definir en un solo lugar el tipo de fuente. Commented el 3 abr. 2022 a las 0:54
  • He revisado todos los archivos css de cada componente y me asegure que el style global de la app tenga solo un font-family pero el problema persiste, es raro porque es que si yo le quito al contenedor html que tiene la clase card-container para que este no tome esos estilos de rotación, pues hay si la letra se ve normal, no sale con ese tinte en negro. He modificado la pregunta y agregare información extra con el código html de esa pagina y algunas imágenes para mostrar con mayor precisión el problema
    – Hugo
    Commented el 3 abr. 2022 a las 21:13
  • Descubrí cual es el problema compañeros, es esta propiedad que tengo en el codigo css: "transform-style: preserve-3d;" cuando la quito las letras ya no se ven con ese tinte negro, pero ahora mi pregunta es. Como haría para que el texto que está detrás de la card no se vea alrrebes sin con esta propiedad me aseguraba que al voltearse la card el texto se veía normal?
    – Hugo
    Commented el 3 abr. 2022 a las 22:11
  • Y yo acabo de hacer una respuesta. Fíjate esa respuesta Commented el 3 abr. 2022 a las 22:13

1 respuesta 1

0

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 */
}
3
  • Tenia entendido que también podías comentar el css con // cuando se comenta solo una linea, pero probé tu solución en todos los comentario y el error en la fuente todavía se presenta brother, sin embargo encontré lo que provoca el problema y es esta propiedad: "transform-style: preserve-3d;" talves todavía no es compatible en los navegadores porque lo probé en chrome y edge y nada. Ahora el tema es como hago para hacer que funcione esta propiedad o alguna otra forma para invertir el texto que está detrás de la card, ya que ahora se ve invertido y esta propiedad me colocaba el texto normal :´D
    – Hugo
    Commented el 3 abr. 2022 a las 22:30
  • Acabo de editar la respuesta. Faltaba algunos detalles importante. Prueba de nuevo con eso. Y si no es eso; seguiremos quién sabe hasta cuándo Commented el 3 abr. 2022 a las 22:48
  • Ya lo modifique y tampoco funciona :/. El problema solo se arregla cuando quito la propiedad "transform-style: preserve-3d;" pero el problema es que el texto que esta atrás de las card quedarían invertidos si quito esa propiedad. Aquí mirando que más pistas puedo darte pero creo que ya he proporcionado toda la información necesaria respecto a mi código, Será colocar otro tipo de efecto para las card
    – Hugo
    Commented el 3 abr. 2022 a las 23:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.