Propiedad perspective de CSS

La propiedad perspective otorga perspectiva a un elemento posicionado en 3D y determina la distancia entre el plano z=0 y el espectador.

Un elemento 3D con z > 0 se vuelve más grande, un elemento 3D con z < 0 se vuelve más pequeño.

La propiedad perspective acepta un valor de longitud. Cero es válido, mientras que los valores negativos se tratan como positivos.

La propiedad perspective es una de las propiedades de CSS3.

INFO

La principal diferencia entre la propiedad perspective y el valor perspective() de la propiedad transform es la siguiente: la propiedad perspective no afecta al elemento en sí; solo aplica una vista en perspectiva a sus elementos hijos. Mientras que la función perspective() aplica profundidad directamente al elemento al que se aplica.

INFO

Los navegadores modernos admiten completamente esta propiedad 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

css

perspective: length | none | initial | inherit;

Ejemplo de la propiedad perspective:

Ejemplo de código CSS de perspective

html

<!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>

Try it Yourself »

Resultado

Perspectiva CSS con px

Ejemplo de la propiedad perspective especificada como 100px:

Ejemplo de CSS perspective con px

html

<!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>

Try it Yourself »

Valores

Valor	Descripción
length	Aplica una transformación de perspectiva al elemento y 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.

Práctica

¿Qué hace la propiedad CSS 'perspective'?

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

Propiedad perspective de CSS ​

Sintaxis ​

Ejemplo de la propiedad perspective: ​

Resultado ​

Ejemplo de la propiedad perspective especificada como 100px: ​

Valores ​