Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Uso de Perspectiva para Efectos de Profundidad | Transformación de Elementos con CSS
Técnicas Avanzadas de CSS

bookUso 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.html

index.css

index.css

copy

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.

question mark

¿A qué elemento se debe aplicar la propiedad perspective?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 7

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 2.04

bookUso 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.html

index.css

index.css

copy

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.

question mark

¿A qué elemento se debe aplicar la propiedad perspective?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 7
some-alt