W3docs
es
Iniciar sesión

Propiedad CSS perspective-origin

Usa la propiedad CSS perspective-origin para definir desde qué perspectiva se muestra el elemento al usuario. Consulta valores y ejemplos.

La propiedad CSS perspective-origin establece la posición desde la cual el espectador parece estar mirando un elemento con transformación 3D. En otras palabras, mueve el punto de fuga — el punto hacia el que parecen converger las caras anguladas respecto a la pantalla. Es una de las propiedades CSS3.

Cómo funciona

Una escena 3D necesita dos ingredientes para verse correctamente:

  1. La propiedad perspective, que establece qué tan intenso es el efecto 3D (cuanto menor sea el valor, más dramático será el escorzo).
  2. La propiedad perspective-origin, que establece dónde está la cámara. perspective decide la profundidad del punto de fuga; perspective-origin decide su posición horizontal y vertical.

Por defecto, el punto de fuga se sitúa exactamente en el centro del elemento (50% 50%), de modo que una cara de hijo rotada se ve simétrica. Desplazar perspective-origin hacia un lado es como rodear el objeto: el mismo hijo parece verse desde la izquierda, la derecha, desde arriba o desde abajo.

perspective-origin solo tiene efecto cuando perspective también está definido, ya sea en el mismo elemento o en un ancestro. Sin él, la propiedad se analiza pero no hace nada.

La sintaxis de dos valores siempre se lee horizontal primero, vertical segundo (por ejemplo, perspective-origin: 25% 75%). Cuando se proporciona un solo valor, el que falta toma el valor predeterminado de center. Los pares de palabras clave como top left son la excepción — las palabras clave pueden escribirse en cualquier orden porque cada una nombra un eje específico.

Información

perspective-origin se aplica al elemento padre pero determina cómo se proyectan sus elementos hijos — el elemento al que se aplica no se transforma en sí mismo.

Valor inicial50% 50%
Se aplica aElementos transformables.
HeredadoNo.
AnimableSí. La transformación de la perspectiva es animable.
VersiónCSS3
Sintaxis DOMobject.style.perspectiveOrigin = "20px 70%";

Sintaxis

Sintaxis CSS de perspective-origin

perspective-origin: x-position y-position | x | y | closest-side | farthest-side | initial | inherit;

Ejemplo de la propiedad perspective-origin:

Ejemplo de código CSS perspective-origin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 60px;
        border: 1px solid #666;
        perspective: 130px;
        perspective-origin: 50% 50%;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: 50% 50%:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>
Pruébalo tú mismo »

Resultado

CSS perspective-origin centrado (50% 50%)

Con el valor predeterminado 50% 50%, el punto de fuga está centrado, por lo que el Box2 rotado se ve con un escorzo uniforme. En los siguientes ejemplos movemos ese punto hacia un borde y observamos cómo cambia el ángulo de visión aparente.

Ejemplo de la propiedad perspective-origin con el valor "left":

Ejemplo CSS de perspective-origin con valor left

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 20px;
        border: 1px solid #666;
        perspective: 80px;
        perspective-origin: left;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: left:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de la propiedad perspective-origin con el valor "right":

Ejemplo CSS de perspective-origin con valor right

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 160px;
        border: 1px solid #666;
        perspective: 80px;
        perspective-origin: right;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>
Pruébalo tú mismo »

Ejemplo de la propiedad perspective-origin definida como "bottom right":

Ejemplo CSS de perspective-origin bottom

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .element1 {
        position: relative;
        height: 150px;
        width: 150px;
        margin-left: 60px;
        border: 1px solid #666;
        perspective: 130px;
        perspective-origin: bottom right;
      }
      .element2 {
        padding: 50px;
        position: absolute;
        border: 1px solid #000;
        background: #8ebf42;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
      }
    </style>
  </head>
  <body>
    <h2>Perspective-origin property example</h2>
    <h3>Perspective-origin: bottom right:</h3>
    <div class="element1">
      Box1
      <div class="element2">Box2</div>
    </div>
  </body>
</html>
Pruébalo tú mismo »

Valores

ValorDescripción
x-positionLa posición horizontal del punto de fuga. Acepta un <length>, un porcentaje o una de las palabras clave left (= 0), center (= 50%) o right (= 100%).
y-positionLa posición vertical del punto de fuga. Acepta un <length>, un porcentaje o una de las palabras clave top (= 0), center (= 50%) o bottom (= 100%).
initialEstablece esta propiedad en su valor predeterminado (50% 50%).
inheritHereda esta propiedad de su elemento padre.

Los valores de porcentaje y longitud se resuelven respecto al propio cuadro del elemento, con el origen en la esquina superior izquierda. Así, 0 0 coloca el punto de fuga en la esquina superior izquierda, 100% 100% en la esquina inferior derecha, y se permiten valores negativos o mayores del 100% para desplazar la cámara fuera del cuadro.

Compatibilidad con navegadores

perspective-origin es compatible con todos los navegadores modernos. Ya no es necesario usar prefijos de proveedor como -webkit-perspective-origin para las versiones actuales de Chrome, Edge, Firefox y Safari.

Propiedades relacionadas

  • perspective — establece la distancia al punto de fuga y es obligatorio para que perspective-origin tenga algún efecto.
  • transform — aplica las transformaciones rotateX, rotateY y translateZ a las que se aplica la perspectiva.
  • transform-style — usa preserve-3d para que los hijos anidados conserven sus posiciones 3D dentro de la perspectiva.
  • backface-visibility — controla si se muestra el lado inverso de un elemento rotado.

Práctica

Práctica
¿Qué hace la propiedad CSS 'perspective-origin'?
¿Qué hace la propiedad CSS 'perspective-origin'?
Was this page helpful?