¿Qué demonios es la propiedad de perspectiva CSS3?

Question

Realicé búsquedas en línea y encontré varios materiales, pero ninguno de ellos ilustró este concepto con claridad, al menos para mí. Por ejemplo, w3schools dice que define cuántos píxeles se coloca un elemento 3D desde la vista. Es tan abstracto que entiendo totalmente. ¿Puede alguien decirme de una manera más vívida y fácil de entender? No podría ser mejor si hay algunas imágenes para mostrar este concepto.

Answer 1

En las transformaciones 3D, la perspectiva proporciona al objeto un punto de vista 3D e intenta representar la perspectiva del objeto 3D desde la perspectiva de un observador particular. No es fácil de entender

Aquí hay un Safari reference en él.

A beginning tutorial en él.

Some examples de usar la perspectiva.

Some more examples.

Para su información, en el futuro le sugiero que ignore todas las visitas de búsqueda de Google que provienen de w3schools. De alguna manera han logrado cooptar una alta clasificación de búsqueda de Google con contenido increíblemente superficial.

Answer 2

Cuando se trabaja en un espacio3D, tenemos que establecer un valor perspectiva, de lo contrario los elementos animados se ven planos. ¿Cómo? La propiedad CSS de perspectiva le da a un elemento un espacio 3D al afectar la distancia entre el índice Z y el usuario. Recuerde: la propiedad Perspectiva no se debe aplicar al elemento que se animará (a través de una Transición, Transformación o Animación CSS), pero a un elemento padre.