transform-origin

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 inicial50% 50% 0
Applies totransformable elements
Heredableno
Percentagesrefer to the size of bounding box
Valor calculadofor length the absolute value, otherwise a percentage
Animation typesimple list of length, percentage, or calc

Sintaxis

Sintaxis Formal: 
[ (en-US) <length-percentage> | (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom ] (en-US) | (en-US) [ (en-US) [ (en-US) <length-percentage> | (en-US) left | (en-US) center | (en-US) right ] (en-US) && (en-US) [ (en-US) <length-percentage> | (en-US) top | (en-US) center | (en-US) bottom ] (en-US) ] (en-US) <length>? (en-US)
where 
<length-percentage> = <length> | (en-US) <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! (en-US)

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