Propiedad CSS transform-origin

La propiedad CSS transform-origin establece el punto alrededor del cual se transforma un elemento — el pivote para las rotaciones, el ancla para el escalado y el punto de referencia para el sesgo.

Por defecto, cada transformación ocurre alrededor del centro del elemento (50% 50%). Si rotas una caja, gira sobre su propio centro; si la escalas, crece hacia afuera en todas las direcciones. transform-origin te permite mover ese pivote a cualquier lugar — a una esquina, un borde, o incluso a un punto fuera de la caja — de modo que la misma transformación produce un movimiento completamente diferente.

Esta página cubre la sintaxis, el comportamiento de los valores de palabra clave, porcentaje y longitud, el valor opcional del eje z para 3D, y ejemplos prácticos que puedes ejecutar.

Por qué importa transform-origin

Una rotación tiene un aspecto muy diferente dependiendo de dónde se encuentre su pivote. Imagina el minutero de un reloj: rotarlo alrededor de su centro traza un círculo pequeño, pero rotarlo alrededor de su base hace que la punta recorra toda la esfera — el mismo rotate(), pero con un origen diferente.

Por eso transform-origin es esencial para:

Movimientos con bisagra o tipo puerta — rotar alrededor de un borde en lugar del centro.
Escalar desde una esquina — expandir un menú desde su esquina superior izquierda en lugar de su centro.
Volteo de tarjetas 3D — combinarlo con el desplazamiento en z y la propiedad perspective.

La propiedad transform-origin solo tiene efecto cuando se aplica una función de transformación mediante la propiedad transform — por sí sola no hace nada. Es una de las propiedades CSS3.

Resumen de sintaxis

El valor puede especificarse con:

Palabras clave de desplazamiento — left, center, right, top, bottom (p. ej. top left).
Longitudes — medidas desde la esquina superior izquierda del elemento (p. ej. 0 0, 80px 40px).
Porcentajes — relativos al tamaño propio del elemento (p. ej. 0% 0% es la esquina superior izquierda, 100% 100% es la esquina inferior derecha).

Si solo se indica un valor, el segundo toma el valor predeterminado center. Un tercer valor establece la posición en el eje z y solo es relevante para transformaciones 3D.

Información

Históricamente, el prefijo -webkit- se usaba en Safari, Chrome y versiones antiguas de Opera. Los navegadores modernos ya no requieren prefijos de proveedor para esta propiedad.

Valor inicial	50% 50% 0
Se aplica a	Elementos transformables.
Heredado	No.
Animable	Sí. El grado es animable.
Versión	CSS3
Sintaxis DOM	Object.style.transform-origin = "10% 30%";

Sintaxis

Valores de CSS transform-origin

transform-origin: x-offset y-offset z-offset | initial | inherit;

Ejemplo de la propiedad transform-origin:

Ejemplo de código CSS transform-origin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .big {
        position: relative;
        height: 300px;
        width: 300px;
        margin: 80px;
        padding: 5px;
        border: 2px solid #666666;
        background-color: #eeeeee;
      }
      .little {
        padding: 60px;
        position: absolute;
        border: 2px solid #666666;
        background-color: #8ebf42;
        -webkit-transform: rotate(35deg);
        -webkit-transform-origin: 70% 90%;
        transform: rotate(35deg);
        transform-origin: 70% 90%;
      }
    </style>
  </head>
  <body>
    <h2>Transform-origin property example</h2>
    <div class="big">
      <div class="little">Box</div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Resultado

La caja pequeña está rotada 35°, pero como transform-origin es 70% 90% (área inferior derecha), gira alrededor de ese punto en lugar de su centro.

El siguiente ejemplo rota cuatro cajas idénticas el mismo 25deg y solo cambia transform-origin, para que puedas ver cómo cada valor desplaza el pivote.

Ejemplo de transform-origin con cuatro valores:

Otro ejemplo de código CSS transform-origin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #eeeeee;
        font-size: 1.1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .container {
        margin: 10px auto;
        max-width: 700px;
      }
      .wrap {
        width: 150px;
        height: 150px;
        border: 2px solid #666666;
        display: inline-block;
        margin: 100px;
      }
      .box {
        width: 150px;
        height: 150px;
        position: relative;
        color: #eeeeee;
        text-align: center;
        line-height: 150px;
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
      }
      .a {
        background-color: #0747af;
      }
      .b {
        background-color: #40b530;
        -webkit-transform-origin: top left;
        transform-origin: top left;
      }
      .c {
        background-color: #666666;
        -webkit-transform-origin: 90% 120%;
        transform-origin: 90% 120%;
      }
      .d {
        background-color: #ffdb11;
        -webkit-transform-origin: 80px 40px;
        transform-origin: 80px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Transform-origin property example</h2>
    <div class="container">
      <div class="wrap">
        <div class="box a">
          50% 50%
        </div>
      </div>
      <div class="wrap">
        <div class="box b">
          top left
        </div>
      </div>
      <div class="wrap">
        <div class="box c">
          90% 120%
        </div>
      </div>
      <div class="wrap">
        <div class="box d">
          80px 40px
        </div>
      </div>
    </div>
  </body>
</html>

Pruébalo tú mismo »

Leyendo las cuatro cajas: 50% 50% gira sobre el centro, top left pivota en la esquina superior izquierda, 90% 120% usa un punto debajo y a la derecha de la caja, y 80px 40px mide el pivote en píxeles desde la esquina superior izquierda.

El desplazamiento z para transformaciones 3D

El tercer valor mueve el pivote a lo largo del eje z (hacia o alejándose del observador). Solo tiene un efecto visible con funciones de transformación 3D como rotateX() o rotateY(), y debe ser una longitud — los porcentajes no están permitidos para el valor z.

.card {
  /* pivot at the center, pushed 50px toward the viewer */
  transform: rotateY(45deg);
  transform-origin: center center 50px;
}

Para que el efecto 3D sea visible, el elemento padre normalmente necesita un valor de perspective (y puedes desplazar el punto de fuga con perspective-origin).

Valores

Valor	Descripción
`x-offset`	Especifica la posición horizontal. Acepta palabras clave (`left`, `center`, `right`), longitudes o porcentajes.
`y-offset`	Especifica la posición vertical. Acepta palabras clave (`top`, `center`, `bottom`), longitudes o porcentajes.
`z-offset`	Especifica la posición de profundidad a lo largo del eje z para transformaciones 3D. Acepta valores de longitud.
`initial`	Establece esta propiedad a su valor predeterminado.
`inherit`	Hereda esta propiedad de su elemento padre.

Consejos y advertencias

No hace nada por sí sola. Si transform-origin parece no tener efecto, comprueba que el elemento también tenga un valor transform — sin él no hay nada alrededor de lo que pivotar.
Los porcentajes son relativos al elemento, no a su padre: 100% 0% es la esquina superior derecha del propio elemento.
El orden es x después de y, así que top left y left top son equivalentes (las palabras clave son independientes del orden), pero 0% 100% (inferior izquierda) y 100% 0% (superior derecha) no lo son.
Anima las transformaciones, no el origen, para un movimiento suave. Cambiar transform-origin a mitad de una animación hace que el elemento salte, así que establece el origen una vez y anima la transition o la animation sobre transform.

Propiedades relacionadas

transform — aplica la rotación, escala, sesgo o traslación alrededor de la que pivota el origen.
perspective y perspective-origin — necesarios para ver el origen del eje z en 3D.
transition y animation — animan transformaciones a lo largo del tiempo.

Práctica

La propiedad transform-origin solo funciona con

elementos animables.elementos transformables.elementos posicionados.