La perspectivepropiedad CSS le da a un elemento un espacio 3D al afectar la distancia entre el plano Z y el usuario.
La fuerza del efecto está determinada por el valor. Cuanto menor sea el valor, más cerca estará del plano Z y más impresionante será el efecto visual. Cuanto mayor sea el valor, más sutil será el efecto.
Importante: tenga en cuenta que la propiedad de perspectiva no afecta la forma en que se representa el elemento; simplemente habilita un espacio 3D para elementos secundarios. Ésta es la principal diferencia entre la transform: perspective()función y la perspectivepropiedad. El primero le da profundidad al elemento, mientras que el segundo crea un espacio 3D compartido por todos sus hijos transformados.
/** * Syntax * perspective: none | */ .parent ( perspective: 1000px; ) .child ( transform: rotateY(50deg); ) La demostración anterior tiene como objetivo mostrar la diferencia entre la función y la propiedad.
- En el lado izquierdo, puede ver la propiedad aplicada al padre (
perspective: 50em) de los elementos transformados (transform: rotateY(50deg)). - En el lado derecho, la perspectiva se aplica desde la transformación directamente a los niños (
transform: perspective(50em) rotateY(50deg)).
Esto muestra cómo establecer la perspectiva del padre hace que todos los niños compartan el mismo espacio 3D y, por tanto, el mismo punto de fuga.
Probemos algo aún más genial: un cubo con transformaciones 3D y perspectiva.
Así es como se hace el cubo: se basa en dos envoltorios anidados (uno para darle perspectiva al cubo y otro para envolver todos los lados) y 6 elementos para hacer los lados. A cada elemento se le da su propia transformación mezclando traducción y rotación en el espacio 3D (por ejemplo transform: rotateX(90deg) translateZ(1em)).
Terminemos con una demostración que presenta lo que podría ser la base de un diseño del mundo real: una pared de fotografías + leyendas usando perspectiva y transformación.
Al pasar el cursor sobre la pared, los niños vuelven a su posición normal, cancelando el efecto.
¡Importante! El uso de la perspectiva (con un valor diferente de 0 o ninguno) crea un nuevo contexto de apilamiento.
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| 12+ | Alguna | 10+ | Ninguno | 10+ | 3+ | Alguna |
Firefox 10-15 necesita -moz-, los navegadores WebKit pueden necesitar -webkit-