transform-origin

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
Media	visual
Valor calculado	for `length` the absolute value, otherwise a percentage
Animation type	simple list of length, percentage, or calc
Canonical order	One or two values, with length made absolute and keywords translated to percentages

Sintaxis

Sintaxis Formal: [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where 
<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

Especificación	Estado	Comentario
CSS Transforms Level 1 La definición de 'transform-origin' en esta especificación.	Working Draft

Compatibilidad con navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Escritorio
Móvil

Características	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Soporte básico	(Yes) -webkit	3.5 (1.9.1)-moz 16.0 (16.0)	9.0-ms 10.0	10.5-o 12.10	3.1-webkit
Sintaxis con tres valores	(Yes) -webkit	10 (10)-moz 16.0 (16.0)	10.0	Sin soporte	(Yes) -webkit

Características	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Soporte básico	?	?	?	?	?	?
Sintaxis con tres valores	?	?	?	?	Sin soporte	?

Note: Internet Explorer 5.5 o versiones posteriores soportan la propiedad Matrix Filter que puede ser usada para lograr efectos similares.

Ver también

Uso de CSS transform