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 inicial | 50% 50% 0 |
---|---|
Applies to | transformable elements |
Heredable | no |
Percentages | refer to the size of bounding box |
Valor calculado | for length the absolute value, otherwise a percentage |
Animation type | simple 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
ocenter
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
ocenter
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
ocenter
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: rotate(30deg); |
|
transform: rotate(30deg); |
|
transform: scale(1.9); |
|
transform: scale(1.9); |
|
transform: scale(1.9); |
|
transform: skewX(50deg); |
|
transform: skewY(50deg); |
|
Especificaciones
Especificación | Estado | Comentario |
---|---|---|
CSS Transforms Level 1 La definición de 'transform-origin' en esta especificación. |
Working Draft |
Compatibilidad con navegadores
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 | ? |