From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/transform-origin/index.html | 262 +++++++++++++++++++++++++++ 1 file changed, 262 insertions(+) create mode 100644 files/es/web/css/transform-origin/index.html (limited to 'files/es/web/css/transform-origin') diff --git a/files/es/web/css/transform-origin/index.html b/files/es/web/css/transform-origin/index.html new file mode 100644 index 0000000000..4ebf8d6fd9 --- /dev/null +++ b/files/es/web/css/transform-origin/index.html @@ -0,0 +1,262 @@ +--- +title: transform-origin +slug: Web/CSS/transform-origin +translation_of: Web/CSS/transform-origin +--- +

{{ CSSRef("CSS Transforms") }} {{ SeeCompatTable() }}

+ +

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.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Sintaxis Formal: {{csssyntax("transform-origin")}}
+
+ +
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 {{cssxref("<length>")}} o un {{cssxref("<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 {{cssxref("<length>")}} o un {{cssxref("<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 {{cssxref("<length>")}} (y nunca un {{cssxref("<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 {{cssxref("<percentage>")}}:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadValor
left0%
center50%
right100%
top0%
bottom100%
+ +

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ónEstadoComentario
{{ SpecName('CSS3 Transforms', '#transform-origin', 'transform-origin') }}{{ Spec2('CSS3 Transforms') }} 
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		9.0{{ property_prefix("-ms") }}
+ 10.0		10.5{{ property_prefix("-o") }}
+ 12.10		3.1{{ property_prefix("-webkit") }}
Sintaxis con tres valores{{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		10.0{{ CompatNo() }}{{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Sintaxis con tres valores{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}
+
+ +
Note: Internet Explorer 5.5 o versiones posteriores soportan la propiedad Matrix Filter que puede ser usada para lograr efectos similares.
+ +

Ver también

+ + -- cgit v1.2.3-54-g00ecf