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

Compatibilidad con navegadores

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

Etiquetas y colaboradores del documento

 Colaboradores en esta página: Sebastianz, fscholz, teoli, limonada_prototype
 Última actualización por: Sebastianz,