Backface visibility

Con la propiedad backface-visibility podemos hacer cosas geniales como tarjetitas que se voltean 😈. Por ejemplo, estas tarjetitas que hice para un blog de Platzi donde aprendemos a hacer un juego con Vue 👀👇
.

.
El concepto es simple, puede costar un poquito entenderlo al inicio, pero al cuando lo entiendes se vuelve sencillo:
.
Tenemos un elemento, ese elemento tiene una parte de adelante y una parte de atrás, no importa si el elemento es plano. La propiedad backface-visibility mostrará u ocultará esa cara de atrás dependiendo de lo que esta propiedad indique.
.
¿Esto que significa? Bueno, que si pones tu backface-visibility como hidden, la parte de atrás de tu tarjeta no se verá, pero la de adelante sí; es decir, si tu le pusieras un transform: rotateX(180deg) no verías nada, porque justamente estarías viendo la cara de atrás del elemento, que está oculta por el backface-visibility ☝👀.
.
Por cierto, si quieres ver el blog donde hago el juego usando estas propiedades de backface-visibility puedes mirarlo aquí: Guía desde cero: tu propio juego de Rick and Morty con Vue.js

super mal la explicación de la clase, corta el video por no saber el problema, al regresar ya tiene nuevas propiedades agregadas y no clara la explicación después de eso.

Complementando la explicación que dió la maestra, por si alguien se quedó con la duda del problema con las clases .face .front:
.
La razón por la que no se estaban aplicando los estilos a los elementos es porque al inicio los selectores estaban escritos así: .face .front. Al estar escritos de esa manera, CSS esta buscando un elemento con clase .front dentro de un elemento con clase .face, lo cual no tenemos. Ese espacio entre un selector y otro es lo que ocasiona este comportamiento. Es como si hiciéramos lo siguiente:

// HTML
<div class="padre">
	<div class="hijo"></div>
</div>

// CSS
.padre .hijo {
	background-color: red;
}

En el CSS anterior, gracias a ese espacio entre selectores es que podemos acceder al elemento con clase .hijo dentro del elemento con clase .padre
.
PERO ese no era el HTML que teníamos nosotros. Lo que teníamos era lo siguiente:

// HTML
<div class="card">
	<div class="face front"></div>
	<div class="face back"></div>
</div>

Entonces, ¿cómo seleccionamos esos div en CSS? Quitándole el espacio entre selectores.

// CSS
.face.front {
	background-color: red;
}

De esta manera, al escribir los selectores sin espacios (todo junto), le estamos diciendo a CSS que queremos aplicar esos estilos al elemento que tenga las dos clases, tanto .face como .front.

recomiendo al equipo de platzi por favor revisar esta clase reeditarla (a lo menos) o cambiarla la explicacion muy vaga aparecen propiedades que no explican en codigo en fin incompleto deja mucho que desear que esta pasando estan perdiendo calidad de contenido que tenian antes

despues del error de .face .front con el espacio, corta el video y mágicamente aparece la propiedad backface-visibility dentro de .face, la cual nunca explica

Para lo que como yo no entedimos esta clase, la voy a tratar de explicar un poco.
.
La cara trasera de un elemento o su backface es como un reflejo de su cara delantera. Esta es invisible en 2D, pero puede llegar a ser visible cuando el elemento se rota en un espacio 3D.
.
En el siguiente link hay como un demo de mas o menos como funciona esta propiedad
https://www.w3schools.com/cssref/trycss3_backface_inuse.htm
.
Además de eso, aquí hay un articulo para ver mas a profundidad como usar la propiedad en si:
https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility

Hasta ahorita me arrepiedo mucho por pagar platzi:(
Ya e cursado otros cursos hay un gran problema en la calidad de las clases, ni modo me llevo una gran decepción:(

Para los que quieran ver esa rotacion pueden agregar la propiedad de transition: 1s; a .card y a .card:hover. Pueden hacer que la animacion dure mas o menos segundos cambiandole el 1 por el los segundos que quieran que dure la animacion:

    .card {
      transition: 1s;
      width: 200px;
      height: 200px;
      transform-style: preserve-3d;
      position: relative;
    }
    .card:hover {
      transition: 1s;
      transform: rotateY(180deg);
    }

Si a la clase “.card” le agregan un “transistion: all 0.3s ease” verán la magia

Amigos,
Les alcanzo un resumen en .gif con las propiedades de transform que hemos estudiado hasta ahora.

espero les sea de utilidad,

Articulo relacionado

En este enlace podemos ver un poco mas sobre las propiedades y demás de la propiedad backface-visibility.
👇
backface-visibility

Notas de la clase

Pesima clase, se corto una parte y añadio nuevas propiedades sin explicar.

Aquí hay un ejemplo rápido de lo que hace esta propiedad aplicada en una tarjeta

https://www.youtube.com/watch?v=4wdNiHrI1DM&t=0s

🍿Backface visibility

❤Resumen

determina si la cara posterior de un elemento es visible de frente al usuario. La cara posterior de un elemento siempre es un fondo transparente, permitiendo, cuando es visible, que se muestre una imagen de espejo de la cara frontal.

• Codigo

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
          .card {
              width: 200px;
              height: 200px;
              transform-style: preserve-3d;
              position: relative;
          }
          .card:hover {
              transform: rotateY(180deg);
              transition: 1000ms;
          }
          .face {
              border-radius: 20px;
              width: 100%;
              height: 100%;
              position: absolute;
              backface-visibility: hidden;
          }
          .face.front {
              background: pink;
          }
          .face.back {
              background: papayawhip;
              transform: rotateX(180deg);
          }
      </style>
  </head>
  <body>
      <div class="card">
          <div class="face front"></div>
          <div class="face back"></div>
      </div>
  </body>
  </html>
  

🧡Sintaxis

backface-visibility: visible;
backface-visibility: hidden;

💛Lecturas recomendadas

Documentación en ingles ( con ejemplos practicos )

Documentación es español ( sin ejemplos practicos )

Explicación de por que no se aplican los estilos en el ejercicio

Este es mi código!

Cortaron demasiado el video 😨 seguro ahí estaba la explicación de la propiedad backface-visibility. Por favor corregirlo para los próximos estudiantes. Gracias. 😎

Les dejo un link de la teoría de esta propiedad por mientras: backface-visibility teoría W3Schools

Se que en esta clase no se observo una explicación muy clara por parte de la profesora Estefany😨, pero como todo, son cosas que pasan. Posiblemente no suele trabajar mucho con tarjetas de dos caras🙅, a mi personalmente en esta ocación me costo entenderle pero No hay que quedarse Solo con eso.
Esa es la ventaja de aprender por internet. Si no entiendes algo investiga y pregunta.

Encontre un video interesante que explica como crear la tarjeta en la que estaba trabajando Estefany, esta en ingles pero es entendible solo con ver el codigo mientras lo va haciendo.
https://www.youtube.com/watch?v=SdC0DDdT_rM&t=43s

Si depronto quedaste con alguna duda de este concepto te comparto un video en donde se explica el paso a paso para poder hacer uso de este recurso, espero te sirva para clarificar este concepto ya que puede ser muy util para realizar animaciones en cards.
https://www.youtube.com/watch?v=SdC0DDdT_rM

Backface visibility
Un ejemplo sencillo sobre el concepto de esta clase, analícenlo

HTML

<div class="container">
<div class="reversible">
   <div class="verso">VERSO</div>
   <div class="cara">CARA</div>
</div>
</div>

CSS

.container {
  perspective: 400px;
}

.reversible {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 150px auto;
  transform-style: preserve-3d;
  transition: transform 2s ease;
}

.reversible:hover {
  transform: rotateY(180deg);
}

.reversible div {
  position: absolute;
  width: 150px;
  height: 150px;
  backface-visibility: hidden;
  text-align: center;
}

.cara {
  background-color: green;
  
}

.verso {
  background-color: purple;
  color: #aaa;
  transform: rotateY( 180deg);
}

No me gusta que use colores tan claros, no se llega a apreciar bien e incluso tengo que esforzar la vista

De pronto para los que no entiendieron mucho.

Agregue unos comentarios acorde a la clase.

 .face.front {
            background: lightpink;
            /*Se pone la propiedad al elemento que se va a ocultar cuando gire*/
            backface-visibility: hidden;
        }
        .face.back {
            background: lightgreen;
            /*Se debe rotar la cara trasera para poder ver para poder ver el contenido derecho*/
            transform: rotateY(180deg);

        }
        .card:hover{
            /*Va a a girar en si y mostrando el back*/
            transform: rotateY(180deg);
        }```

Hice este ejercicio. Le agregué texto para ver como se veria al momento de girarlo. El texto se muestra en sentido contrario por eso la profe usa 2 divs para poder mostrar el resultado bein.

backface-visibility: este atributo solo funciona con elementos que esten en un espacio 3d ya que estos al tener perspectiva se podra ver su parte delantera y trasera. la funcion de backface-visibility es determinar si la parte trasera de un elemento es visible o no es visible de frente al usuario.

la parte trasera de un elemento es un espejo de la parte frontal, osea, si un elemento en bloque es de color morado y tiene el texto hola, entonces, su parte trasera se vera como si vieramos el elemento desde atras por lo que se ve el elemento invertido, osea, se ve el bloque morado con el texto aloh.

Esta clase junto a la anterior creo deberían ser grabadas nuevamente 😦
En la anterior la explicación fue un poco pobre y en esta clase siendo la propiedad backface-visibility la principal de la misma, apareció mágicamente 😞
Se agradece los aportes de los estudiantes tratando de explicar y complementar cada clase pero se que la profesora tiene mucho conocimiento y hasta esta muy bien planeado el curso, son pequeños detalles que van desanimando el aprendizaje.

https://codepen.io/gabriel-code21/pen/gOXrvxP
Aquí pueden revisar todo lo hecho. Todo el código escrito con su demostración desde la clase 5 a la clase 9. Básicamente la sección de transformaciones 2d y 3d.

Mi opinión de cómo debería usarse backface-visibility:

.card {
	position: relative;
	width: 200px;
	height: 200px;
	transition: transform 2s;
}

.card:hover {
	transform: rotateY(180deg);
}

.card:hover .back {
	backface-visibility: visible;
}

.face {
	position: absolute;
	width: 100%;
	height: 100%;
}

.front {
	background-color: orangered;
}

.back {
	backface-visibility: hidden;
	background-color: olive;
	transform: rotateY(180deg);
	transition-duration: 2s;
}

El backface-visibility: hidden; que es el tema del capítulo apareció por arte de magia

Si quieren hacer el efecto de girar, cómo una carta, pueden agregarle a el Style del card esta propiedad y valores.

transition: all 500ms ease;

Es un peek a el contenido por venir en el curso, se puede experimentar o buscar antes de llegar a ese tramo.

en el minuto 4:10 se aparece por arte de magia la propiedad backface-visibility que por cierto no explica por que pone hidden

Para complementar la informacion del video por si te quedan algunas dudas te recomiendo que veas el siguiente video
https://www.youtube.com/watch?v=SdC0DDdT_rM&t=4s
Pero te lo resumo:
Haz el siguiente ejercicio, en una hoja de papel escribe lo que quieras, por ejemplo escribe la palabra front, ahora gira esa hoja de papel 180 grados(transform:rotateY(180deg)), ¿como ves esa palabra?, la debes ver como dice la profesora, con las letras al contrario, ahora que pasa si tienes dos hojas una detras de la otra y ambas han sido giradas, pero ahora lo que tu quieres es ver el contenido que hay detras de la primera hoja, pues ahi aplicas el backface-visibility:hidden y esto es como si la hoja de encima desapareciera y ahora pudieras ver la de abajo, pero como lo que hiciste fue girar ambas hojas esta tambien me desplegara la informacion, con las letras como en espejo, si este no es el comportamiento que queremos, volveriamos a rotar esta hoja y veriamos la palabra como debe ser esto lo podria aplicar para cards con informacion de respaldo, en donde en la capa superior tenga una informacion y en la de abajo tenga otra, dos aspectos importantes a tener encuenta la aplicacion de la propiedad transform-style:preserve-3d en el elemento contenedor y el backface-visibility en el elemento hijo en nuestro caso el hijo que se encuentre en el z-index superior, espero y te sirva el video en donde lo explican mejor, para que puedas complementar tu aprendizaje.

Listo CODEPEN

he pagado platzi pero no recomendaria a nadie pagarlo por explicaciones como estas tan vagas pero gracias a dios tengo algunas bases muy buenas en css que he adquirido fuera de platzi que me puedo enfrentar a explicaciones como estas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Backface visivility </title>
    <style>
        .card{
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            position: relative;
        }
        .card:hover{
            transform: rotateY(180deg);
            transition: 1s;
        }
        .face {
            border-radius: 20px;
            width: 100%;
            height: 100%;
            position: absolute;
            backface-visibility: hidden;
        }
        .face.front {
            background: hotpink;
        }
        .face.back {
            background: papayawhip;
            transform: rotateX(180deg);
            transition: 1s;
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="face front"></div>
        <div class="face back"></div>
    </div>
</body>
</html>

Es decir que la especificidad en en html se escribe así:

.face.front {
	background-color: cadetblue;
}

.
Y en un .css aparte se escribe así:

.face .front {
	background-color: cadetblue;
}