Propiedad CSS perspective

La propiedad perspective define a qué distancia está el observador del plano z = 0 de los hijos 3D de un elemento. En términos sencillos, controla qué tan intenso se ve el efecto 3D: convierte una rotación plana en algo que parece alejarse hacia el interior de la pantalla, de la misma manera en que los objetos se reducen al alejarse del ojo en la vida real.

Se establece en el elemento padre. El valor es la distancia simulada del observador a la pantalla. Los valores más pequeños (como 100px) colocan al observador muy cerca, por lo que la perspectiva es dramática y exagerada. Los valores más grandes (como 1000px) colocan al observador lejos, por lo que el efecto es sutil y casi plano. Esta página explica cómo se comporta la propiedad y muestra la diferencia entre none y una longitud real.

Dado que el hijo se encuentra en el espacio 3D, las partes con z > 0 están más cerca del observador y se ven más grandes, mientras que las partes con z < 0 están más lejos y se ven más pequeñas.

¿Cuándo usaría esto?

Se recurre a perspective cuando se rota un elemento en 3D (usando transform: rotateX(), rotateY(), o translateZ()) y se quiere que esa rotación parezca profundidad real en lugar de una distorsión plana. Los casos comunes incluyen tarjetas con efecto volteo, cubos 3D y carruseles, y efectos de inclinación al pasar el cursor.

La propiedad perspective acepta una única <length>. Cero es válido (desactiva el efecto, como none), y los valores negativos no están permitidos — se tratan como inválidos y se ignoran.

Para controlar dónde se sitúa el punto de fuga (la posición a la que mira el observador), combina esta propiedad con perspective-origin. Para las rotaciones 3D en sí, consulta la propiedad transform, y para mantener los hijos anidados en el mismo espacio 3D, usa transform-style.

La propiedad perspective es una de las propiedades CSS3.

Información

La propiedad perspective frente a la función de transformación perspective(). La propiedad perspective no afecta al elemento en el que se establece — solo aplica una vista en perspectiva a los hijos 3D transformados de ese elemento. El valor perspective() usado dentro de la propiedad transform aplica profundidad directamente al elemento en sí. Usa la propiedad cuando varios hijos comparten una única posición de observador; usa la función cuando un solo elemento necesita su propia profundidad.

Información

Los navegadores modernos admiten esta propiedad completamente sin prefijos de proveedor.

Valor inicial	none
Se aplica a	Elementos transformables.
Heredado	No.
Animable	Sí. La transformación de la perspectiva es animable.
Versión	CSS3
Sintaxis DOM	object.style.perspective = "70px";

Sintaxis

Sintaxis CSS de perspective

perspective: length | none | initial | inherit;

Ejemplo sin perspectiva (`perspective: none`)

Con perspective: none en el padre, el rotateX(40deg) del hijo se renderiza como una distorsión 2D plana — no hay sensación de profundidad. Este es el punto de referencia para comparar.

Ejemplo de código CSS perspective

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the element</title>
    <style>
        .element1 {
        padding: 50px;
        position: absolute;
        border: 1px solid #666;
        background-color: #1c87c9;
        background: #8ebf42;
        -webkit-transform-style: preserve-3d;/* Safari 3-8  */
        -webkit-transform: rotateX(40deg);/* Safari 3-8  */
        transform-style: preserve-3d;
        transform: rotateX(40deg);
      }
      .element2 {
        position: relative;
        height: 160px;
        width: 160px;
        margin-left: 20px;
        border: 1px solid #000;
        -webkit-perspective: none;/* Safari 4-8  */
        perspective: none;
      }
    </style>
  </head>
  <body>
    <h2>Perspective property example</h2>
    <h3>perspective: none:</h3>
    <div class="element2">
      Box2
      <div class="element1">Box1</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Ejemplo con `perspective: 100px`

Ahora el padre recibe una perspective de 100px. Debido a que el observador se simula muy cerca, el mismo rotateX(40deg) en el hijo se percibe como profundidad real — el borde superior retrocede hacia el interior de la pantalla y el cuadro parece inclinado en el espacio 3D. Prueba aumentando el valor a 500px o 1000px y la inclinación se vuelve más suave.

Ejemplo de CSS perspective con px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the element</title>
    <style>
        .element1 {
        padding: 50px;
        position: absolute;
        border: 1px solid #666;
        background-color: #1c87c9;
        background: #8ebf42;
        -webkit-transform-style: preserve-3d;/* Safari 3-8  */
        -webkit-transform: rotateX(40deg);/* Safari 3-8  */
        transform-style: preserve-3d;
        transform: rotateX(40deg);
      }
      .element2 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 50px;
        border: 1px solid #000;
        -webkit-perspective: 100px;/* Safari 4-8  */
        perspective: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Perspective property example</h2>
    <h3>perspective: 100px:</h3>
    <div class="element2">
      Box2
      <div class="element1">Box1</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Valores

Valor	Descripción
length	Aplica una transformación de perspectiva al elemento y a su contenido.
none	No aplica ninguna transformación de perspectiva.
initial	Hace que la propiedad use su valor predeterminado.
inherit	Hereda la propiedad de su elemento padre.

Problemas frecuentes

Establécela en el padre, no en el elemento rotado. Un error común es poner perspective en el mismo elemento que se rota — eso no tiene efecto. O bien muévela al padre, o usa la función perspective() dentro de transform en el propio elemento.
El orden importa con la función perspective(). Cuando uses la función, escríbela primero: transform: perspective(500px) rotateX(40deg). Si se coloca después de la rotación, se aplica a un sistema de coordenadas ya rotado y el resultado cambia.
El 3D anidado necesita transform-style: preserve-3d. Sin esto (el valor predeterminado es flat), los nietos se aplanan en el plano de su padre y se pierde la profundidad.

Propiedades relacionadas

perspective-origin — establece la posición del punto de fuga.
transform — aplica las rotaciones y traslaciones 3D a las que perspective da profundidad.
transform-style — mantiene los elementos anidados en el espacio 3D compartido.
backface-visibility — oculta la parte posterior de un elemento cuando se rota alejándose del observador.

Práctica

¿Qué hace la propiedad CSS 'perspective'?

Preestablece el color de un elementoDetermina la distancia entre el plano z y el usuarioAjusta el espacio 3D de un elementoAfecta la sombra proyectada de un elementoCrea la sensación de profundidad al afectar la escala de un elemento