transform-origin

This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

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
Animatable	yes, as a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a `calc()` function that is the sum of a length and a percentage (each possibly zero), and these `calc()` functions have each half interpolated as real numbers.
Canonical order	One or two values, with length made absolute and keywords translated to percentages

Sintaxis

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

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 The definition of 'transform-origin' in that specification.	Working Draft

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	No support	(Yes) -webkit

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

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

transform-origin

Resumen

Sintaxis

Valores

Ejemplos

Ejemplos en vivo:

Especificaciones

Compatibilidad con navegadores

Ver también

Etiquetas y colaboradores del documento