transform-origin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

Resumen

La propiedad CSS transform-origin le permite modificar el origen de las transformaciones de un elemento. Por ejemplo, el transform-origin de la función rotate() es el centro de rotación. (Esta propiedad es aplicada a la primera translación del elemento por el valor negativo de la propiedad. A continuación, aplicar la transformación del elemento y después trasladar el valor de la propiedad).

Los valores no establecidos explícitamente se restablecen a sus valores originales.

Valor inicial	`50% 50% 0`
Applies to	transformable elements
Heredable	no
Percentages	refer to the size of bounding box
Valor calculado	for `<length>` the absolute value, otherwise a percentage
Animation type	simple list of length, percentage, or calc

Sintaxis

Sintaxis Formal: transform-origin = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] <length>?  |
  [ [ center | left | right ] && [ center | top | bottom ] ] <length>?  

<length-percentage> = 
  <length>      |
  <percentage>

transform-origin: x-offset                                   /* Sintaxis con valor único */   E.g.  transform-origin: 2px
transform-origin: offset-keyword                                                      E.g.  transform-origin: bottom

transform-origin: x-offset y-offset                          /* Sintaxis con dos valores */   E.g.  transform-origin: 3cm 2px
transform-origin: y-offset x-offset-keyword                                           E.g.  transform-origin: 2px left
transform-origin: x-offset-keyword y-offset                                           E.g.  transform-origin: left 2px
transform-origin: x-offset-keyword y-offset-keyword                                   E.g.  transform-origin: right top
transform-origin: y-offset-keyword x-offset-keyword                                   E.g.  transform-origin: top right

transform-origin: x-offset y-offset z-offset                 /* Sintaxis con tres valores */ E.g.  transform-origin: 2px 30% 10px
transform-origin: y-offset x-offset-keyword z-offset                                  E.g.  transform-origin: 2px left 10px
transform-origin: x-offset-keyword y-offset z-offset                                  E.g.  transform-origin: left 5px -3px
transform-origin: x-offset-keyword y-offset-keyword z-offset                          E.g.  transform-origin: right bottom 2cm
transform-origin: y-offset-keyword x-offset-keyword z-offset                          E.g.  transform-origin: bottom right 2cm

Valores

x-offset: Es una <length> o un <percentage> que describe a qué distancia del borde izquierdo de la caja se establece el origen de la transformación.
offset-keyword: Es una de las palabras clave left, right, top, bottom o center que describen el correspondiente desplazamiento.
y-offset: Es una <length> o un <percentage> que indica a qué distancia del borde superior de la caja se establece el origen de la transformación.
x-offset-keyword: Es una de las palabras clave left, right o center que indica a qué distancia del borde izquierdo de la caja se establece el origen de la transformación.
y-offset-keyword: Es una de las palabras clave top, bottom o center que indica a qué distancia del borde superior de la caja se establece el origen de la transformación.
z-offset: Es una <length> (y nunca un <percentage> el cual sería una declaración no válida) que describe que tan lejos del ojo del usuario se estable el origen de la posición z=0.

Las palabras clave son abreviaciones por convención que coinciden con los siguientes valores <percentage>:

Propiedad	Valor
`left`	`0%`
`center`	`50%`
`right`	`100%`
`top`	`0%`
`bottom`	`100%`

Ejemplos

Ver Uso de CSS transforms para más ejemplos.

Ejemplos en vivo

`transform: none;`
`transform: rotate(30deg);`
`transform: rotate(30deg); transform-origin: 0 0;`
`transform: rotate(30deg); transform-origin: 100% 100%;`
`transform: rotate(30deg); transform-origin: -10em -30em;`
`transform: scale(1.9);`
`transform: scale(1.9); transform-origin: 0 0;`
`transform: scale(1.9); transform-origin: 100% -30%;`
`transform: skewX(50deg);`
`transform: skewY(50deg); transform-origin: 0 0;`

Especificaciones

Specification
CSS Transforms Module Level 1 # transform-origin-property

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también

Uso de CSS transform