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
Philip Smith
Desarrollo Web Front End Graduado de Techdegree 17,622 PuntosNo puedo lograr que -side-b se muestre una vez rotado.
Tuve algunos problemas para que backface-visibility funcionara al principio. Cambié el código de solo .photo y .photo:hover a .photo img y .photo:hover img. Eso hizo que backface-visibility funcionara. El problema ahora es que no puedo ver side-b en absoluto.
Actualmente este es mi código:
.photo img {
.photo:hover img {
.side-a,
.side-b {
8 respuestas
Philip Smith
Desarrollo Web Front End Graduado de Techdegree 17,622 Puntos¡Lo descubrí! El z-index tiene que estar en 100. Es increíble que z-index no funcione en 1 pero funcione en 100. ¡Esa es la solución!
Philip Smith
Desarrollo Web Front End Graduado de Techdegree 17,622 PuntosEl HTML que estoy usando es el HTML que Guil proporcionó en el espacio de trabajo anterior. Solo lo estoy ejecutando en VSCode.
Sí, eso es lo que actualmente tengo, en el que tanto img como el div con la clase side-b que contiene la descripción y el botón de descarga están rotando juntos y no puedo ver su reverso ya que está oculto. Que es exactamente lo que quiero. El problema surge cuando quiero que side-b rote y me muestre su cara mientras img muestra su reverso. No están funcionando en tándem como lo hace Guil cuando programo junto a él.
Intentando averiguar cómo hacer que funcionen de la manera en que él los tiene rotando porque con su código no estoy logrando el resultado deseado.
Steven Parker
244 163 puntosLa operación de "tándem" se realiza teniendo ambas imágenes dentro de un contenedor compartido, con una de ellas prerotada. Luego al pasar el mouse, es el contenedor y no las imágenes en sí las que se rotan. De esa manera, ambas cambian 180 grados donde sin el contenedor la visible se rota 180 grados (para ocultarse) y la oculta se rota 360 grados y permanece oculta.
Si aún tienes problemas, podrías considerar mover el proyecto a un espacio de trabajo para que puedas crear un captura de pantalla y publicar el enlace aquí.
Philip Smith
Desarrollo Web Front End Graduado de Techdegree 17,622 PuntosHey Steven, eso tiene mucho sentido para mí. Solo que no estoy obteniendo el efecto de tándem cuando lo escribo de la manera en que se hace en el video. Cuando se codifica de esa manera, solo obtengo que la foto rote y backface-visibility ni siquiera funciona para mí.
Este es mi espacio de trabajo codificado exactamente como Guil instruye: https://w.trhou.se/kuvnyoy3lw
Aquí está mi espacio de trabajo cuando aumento la especificidad para obtener los efectos correctamente hasta la rotación final y pierdo el efecto de tándem: https://w.trhou.se/bv04dgzdbc
Philip Smith
Desarrollo Web Front End Graduado de Techdegree 17,622 PuntosUsar Z-index en .side-b fue lo que lo solucionó para mí. Cuando copié el código que pusiste antes, seguía teniendo los mismos problemas que antes con backface-visibility. También eliminé la especificidad y recuperé todo a solo el div .photo. No estoy seguro de por qué Z-index lo solucionó, pero lo hizo.
Steven Parker
244 163 puntosNo he visto exactamente cómo has usado el índice pero es ciertamente una solución poco convencional y potencialmente frágil. Z-index es un concepto 2D pero estas son transformaciones 3D. La solución de Guil y la mía crean un modelo virtual de objetos físicos tal como podrían estar organizados y movidos.
Patricia Jackson
Desarrollo Web Front End Estudiante de Techdegree 9,165 puntosEstoy teniendo el mismo problema con este código excepto que cuando cambio backface-visibility a visible, cuando rota, puedo ver el reverso de la foto. De lo contrario, cuando está oculto, veo el lado frontal a través del reverso. Nada está oculto.
Steven Parker
244 163 puntosInicia una pregunta nueva, proporciona un enlace a la página y crea un captura de pantalla de tu espacio de trabajo y publica el enlace en tu pregunta.
Steven Parker
244 163 puntosSin ver el HTML esto es solo una suposición, pero si la clase "side-b" se aplica al elemento IMG directamente, entonces pasar el mouse sobre el contenedor haría que se gire de 180 grados a -180 grados, y ambos estarían exponiendo la cara trasera (que está oculta).
Además, supongo que quieres que pasar el mouse rote un contenedor de las imágenes en lugar de las imágenes en sí.
Steven Parker
244 163 puntosUsando tu 2do espacio de trabajo, funcionó como se esperaba después de cambiar la dinámica de hover para aplicarse al contenedor (".photo") en lugar de las imágenes:
/* =================================
Transformaciones y transiciones 3D de fotos
==================================== */
.contenido {
perspectiva: 700px;
}
/* original:
.photo img, .photo .side-b { */
.foto {
transition: transformar 1s ease-out;
estilo de transformación: preserve-3d;
}
/* original:
.photo:hover img, .photo:hover .side-b { */
.foto:desplazamiento del ratón {
transformar: rotateY(-180grados);
}
.side-a, .side-b {
visibilidad trasera: oculto;
}
.side-b {
transformar: rotateY(180grados);
}
Daniel Telders
Desarrollo Web Front End Estudiante de Techdegree 8,024 puntosUsando el código tal como lo escribe Guil, encuentro que funciona en Firefox, pero no en Chrome.
Steven Parker
244 163 puntosSolo uso Chrome y no tuve problemas.
JARRMO VARUSON
5,846 puntosmismo problema.. seguí el paso a paso de Guil, pero no funciona
Steven Parker
244 163 puntosSteven Parker
244 163 puntosNo estoy seguro de cómo estés usando Z-index, pero esa no es el la solución que estaba sugiriendo. Ve el comentario que agregué a mi respuesta.
coco coco
Desarrollo Web Front End Estudiante de Techdegree 184 Puntoscoco coco
Desarrollo Web Front End Estudiante de Techdegree 184 Puntoses porque img tiene z-index: 100 en main.css así que tenemos que hacer que side-b z-index > 100
Steven Parker
244 163 puntosSteven Parker
244 163 puntosLa técnica en este video no mantiene usa (o necesita) z-index cuando se hace correctamente.