Crea una Animación de Volteo con Propiedades de Transformación 3D

.photo-container {
  estilo de transformación:preserve-3d;
}

Recursos

• Usando transformaciones CSS 3D
• transform-style – MDN
• transform-style – WebKit demo
• backface-visibility – MDN
• cubic-bezier – WPD

Revisión de video

• El espacio 3D que estableces se aplica solo a los hijos directos.
• Otros elementos anidados profundamente no vivirán en el mismo espacio 3D, por lo que se comportarán como elementos 2D.
• Para que los elementos anidados se comporten como elementos en el espacio 3D, transmite el espacio 3D hacia abajo usando transform-style.
• transform-style: preserve-3d; indica que los hijos del elemento deben posicionarse en el espacio 3D.
• Por defecto, la parte trasera de un elemento es visible cuando se enfrenta al espectador.
• Cuando los elementos están en el espacio 3D, puedes usar backface-visibility para controlar si ves o no la parte trasera de un elemento.
• backface-visibility: hidden; oculta la parte trasera de un elemento transformado en 3D.