Uso de Perspectiva para Efectos de Profundidad
Todos los elementos se renderizan de forma plana en la página web. Sin embargo, podemos añadir algo de profundidad. perspective
agrega un efecto de elementos en 3D. La sintaxis es la siguiente:
perspective: value in px;
Aplicamos perspective al elemento padre de un elemento que tiene alguna transformación. Así, el elemento se convierte en una especie de escena para el elemento transformado. Para visualizar el concepto, prestemos atención a la siguiente animación. El borde azul es el elemento padre con cierta perspectiva, y el elemento dentro tiene cierta rotación.
Practiquemos y añadamos perspectiva. Nuestra tarea es añadir perspective a los elementos padre (div
con el nombre de clase box-border
) que tienen hijos con alguna transformación.
index.html
index.css
Nota
La propiedad perspective define qué tan lejos está el objeto del usuario. Por lo tanto, un valor menor dará como resultado un efecto 3D más intenso que un valor mayor.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 2.04
Uso de Perspectiva para Efectos de Profundidad
Desliza para mostrar el menú
Todos los elementos se renderizan de forma plana en la página web. Sin embargo, podemos añadir algo de profundidad. perspective
agrega un efecto de elementos en 3D. La sintaxis es la siguiente:
perspective: value in px;
Aplicamos perspective al elemento padre de un elemento que tiene alguna transformación. Así, el elemento se convierte en una especie de escena para el elemento transformado. Para visualizar el concepto, prestemos atención a la siguiente animación. El borde azul es el elemento padre con cierta perspectiva, y el elemento dentro tiene cierta rotación.
Practiquemos y añadamos perspectiva. Nuestra tarea es añadir perspective a los elementos padre (div
con el nombre de clase box-border
) que tienen hijos con alguna transformación.
index.html
index.css
Nota
La propiedad perspective define qué tan lejos está el objeto del usuario. Por lo tanto, un valor menor dará como resultado un efecto 3D más intenso que un valor mayor.
¡Gracias por tus comentarios!