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 Construir un Cubo 3D Giratorio

Publicado por Jay Hinds
.a{fill-rule:evenodd;}techdegree seal-36
Jay Hinds
Revisor de Proyectos Treehouse

No es una pregunta... ¡solo otra solución que puede ayudar a otros!

Algunas personas han tenido problemas cuando el cubo se renderiza en Chrome. En Firefox parece funcionar bien, pero en Chrome parece mostrar la cara posterior de cada lado.

Una solución publicada anteriormente era usar la propiedad "backface-visibility: hidden" en las clases .front, .back, .left y .right, que pareció ayudar a muchas personas. Esta solución no funcionó para mí por alguna razón, así que investigué un poco más.

Me topé con otra solución que fue agregar "opacity: 0.99" a las clases .front, .back, .left y .right, lo que funcionó para mí. Debo mencionar que no necesité usar "backface-visibility: hidden" al usar opacidad.

¡Solo pensé en agregar esto aquí para ayudar a otros que puedan encontrar un problema similar!

3 Respuestas

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

Mi solución aquí con los problemas de renderizado de Chrome fue agregar

backface-visibility: hidden;
transform-style: preserve-3d;

en la declaración .front, .back, .left, .right.

Pedro Miranda
.a{fill-rule:evenodd;}techdegree
Pedro Miranda
Desarrollo Web Front End Estudiante de Techdegree 7,505 Puntos

esto también arregló el mío, ¡gracias!

Alec Moschetti
sello-máscara
.a{fill-rule:evenodd;}techdegree seal-36
Alec Moschetti
Desarrollo Web Front End Graduado de Techdegree 18,226 Puntos
Alec Moschetti
.a{fill-rule:evenodd;}techdegree seal-36
Alec Moschetti
Desarrollo Web Front End Graduado de Techdegree 18,226 Puntos

¡Gracias Jay! Tu solución arregló el problema.

Steven Parker
Steven Parker
244 163 puntos
Steven Parker
Steven Parker
244 163 puntos

Hice este curso usando Chrome y funcionó según lo esperado. Hasta donde sé, cualquiera que tenga problemas ha tenido un error de código; y cuando se corrige el error, el problema desaparece.

Intenta compartir la captura de pantalla con la que tenías problemas y quizás podamos encontrar la causa.

Steven Parker
Steven Parker
244 163 puntos
Steven Parker
Steven Parker
244 163 puntos

ACTUALIZACIÓN: Es posible que estés usando el tipo incorrecto de transformaciones. Consulta el ejemplo en esta otra publicación donde alguien tenía lo que parece ser un problema similar.