Bienvenido a la Comunidad de Treehouse

¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.

¿Buscas aprender algo nuevo?

Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de

Inicia tu prueba gratuita

CSS Transiciones y Transformaciones CSS Agregando Efectos 3D con CSS Crea una Animación de Volteo con Propiedades de Transformación 3D

Samantha Atkinson
sello-máscara
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Desarrollo Web Front End Graduado de Techdegree 43.507 Puntos
Publicado por Samantha Atkinson
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Desarrollo Web Front End Graduado de Techdegree 43.507 Puntos

Mi navegador Chrome parece estar ignorando backface-visibility: hidden;

Estoy 99% seguro de que he seguido el código exactamente, (aunque soy humano así que podría estar equivocado) por alguna razón cuando Guil llega a la parte sobre dar solo .side-a el siguiente código:

.side-a {
visibilidad trasera: oculto;
}

Todavía puedo ver el reverso de .side-a y una vez que terminé la codificación completa del video no funcionó. Cuando usé las herramientas de desarrollador y desactivé el z-index en main.css funcionó. Pero al leer otros comentarios, esto no es algo bueno de hacer. Así que realmente estoy confundido y perplejo.

Esta es una captura de pantalla de mi área de trabajo. https://w.trhou.se/hgr153atib

Samantha Atkinson
sello-máscara
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Desarrollo Web Front End Graduado de Techdegree 43.507 Puntos
Samantha Atkinson
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Desarrollo Web Front End Graduado de Techdegree 43.507 Puntos

Creo que encontré la respuesta y fue agregar:

.side-a,
.side-b {
  visibilidad trasera:oculto;
  estilo de transformación: preserve-3d;
}

Aunque me gustaría que alguien confirmara que esto es correcto ya que pensé que le diste al contenedor padre la propiedad transform-style con el valor preserve-3d, que en este caso debería ser el div .photo que es el padre de .side-a y .side-b.

<div class=photo-container>
                <div class=foto>
                  <img class=side-a src=img/photos/2.jpg alt=Estación Espacial Internacional> 
                  <div class=photo-desc side-b>
                      <h3>La Estación Espacial</h3>
                      <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
                        <a href=# class=button>descargar</a>
                    </div>
                </div>
            </div>
Ryan Markey
.a{fill-rule:evenodd;}techdegree
Ryan Markey
Desarrollo Web Front End Estudiante de Techdegree 12,565 puntos

Tu solución funcionó para mí, las instrucciones de Guil no producen el resultado correcto. Agregar "transform-style: preserve-3d;" a side-a y side-b funcionó.

Jesse Cleary-Budge
.a{fill-rule:evenodd;}techdegree seal-36
Jesse Cleary-Budge
Desarrollo Web Front End Graduado de Techdegree 15,359 puntos

A partir del 7/9/20, solo puedo reproducir los resultados de Guil usando la solución de Sam de agregar transform-style: preserve-3d; a .side-a y .side-b. Agregar el -webkit prefijo antes de backface-visibility: hidden; no funciona en la versión más reciente de Opera (68.0.3618.173). ¡Gracias, Sam!

6 Respuestas

Ryan Groom
Ryan Groom
18,674 Puntos

Firefox 10+ e IE 10+ soportan backface-visibility sin prefijo. Opera (post Blink, 15+), Chrome, Safari, iOS y Android todos necesitan -webkit-backface-visibility. - CSSTricks.com

Entonces en tu CSS bajo backface-visibility:hidden; deberías poner -webkit-backface-visibility: hidden;

Beau Sherman
PLUS
Beau Sherman
Estudiante de Cursos Plus 6,325 puntos
Beau Sherman
Beau Sherman
Estudiante de Cursos Plus 6,325 puntos

Agregar el prefijo no lo arregló para mí. Solo la solución de Samantha funcionó.

Paul Van Leuven
sello-máscara
.a{fill-rule:evenodd;}techdegree
Paul Van Leuven
Desarrollo Web Front End Estudiante de Techdegree 7,105 puntos
Paul Van Leuven
.a{fill-rule:evenodd;}techdegree
Paul Van Leuven
Desarrollo Web Front End Estudiante de Techdegree 7,105 puntos

Sí, la única solución que funcionó para mí fue la de Samantha

.side a,

Matthew McQuain
Matthew McQuain
14,184 puntos

Lo mismo aquí. La respuesta de Samantha es la única que funciona para mí a partir del 7/6/20

Kate C
Kate C
13,589 Puntos
Kate C
Kate C
13,589 Puntos

Muchas gracias.

Junior Aidee
sello-máscara
.a{fill-rule:evenodd;}techdegree seal-36
Junior Aidee
Desarrollo Web Front End Graduado de Techdegree 14,657 Puntos
Junior Aidee
.a{fill-rule:evenodd;}techdegree seal-36
Junior Aidee
Desarrollo Web Front End Graduado de Techdegree 14,657 Puntos

Hola, actualmente estoy teniendo el mismo problema. Seguí el código de Guil pero no funciona para mí.

/* =================================

.content {

.photo {

}

.photo:hover {

}

.side-a,

.side-b {

Samantha Atkinson
sello-máscara
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Desarrollo Web Front End Graduado de Techdegree 43.507 Puntos
Samantha Atkinson
.a{fill-rule:evenodd;}techdegree seal-36
Samantha Atkinson
Desarrollo Web Front End Graduado de Techdegree 43.507 Puntos

Vaya, tengo que decir, he tenido que abandonar este curso para mi FEWD TD pero me encantaría tener el tiempo para depurar completamente esto. Uno para una fecha posterior. Pero estoy muy feliz de que las personas hayan encontrado mi solución útil. Si alguien logra depurar esto, seré el primero en decir Gracias y ¡uff! a ellos.

Eres muy bienvenida Jesse Cleary-Budge : )