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 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: 
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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
transform-origin
bottom
center
left
right
On SVG elements
Three-value syntax
top

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Ver también