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/index.html | 240 ++++++++++++++++++++++++++++++++++ 1 file changed, 240 insertions(+) create mode 100644 files/es/web/css/transform/index.html (limited to 'files/es/web/css/transform') diff --git a/files/es/web/css/transform/index.html b/files/es/web/css/transform/index.html new file mode 100644 index 0000000000..5dc3a1a6b2 --- /dev/null +++ b/files/es/web/css/transform/index.html @@ -0,0 +1,240 @@ +--- +title: transform +slug: Web/CSS/transform +tags: + - CSS + - Compatibilidad con los navegadores + - Experimental + - Propiedad CSS + - Referencia + - Transformación +translation_of: Web/CSS/transform +--- +
{{CSSRef}}
+ +

La propiedad CSS transform te permite modificar el espacio de coordenadas del modelo de formato visual CSS. Usándola, los elementos pueden ser trasladados, rotados, escalados o sesgados de acuerdo a los valores establecidos.

+
{{EmbedInteractiveExample("pages/css/transform.html")}}
+

Si la propiedad tiene un valor diferente a none, se creará un contexto de pila. En ese caso, el objeto actuará como un bloque de contención para los elementos con "position: fixed" que contenga.

+ + + +

Síntaxis

+ +
/* Keyword values */
+transform: none;
+
+/* Function values */
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
+transform: translate(12px, 50%);
+transform: translateX(2em);
+transform: translateY(3in);
+transform: scale(2, 0.5);
+transform: scaleX(2);
+transform: scaleY(0.5);
+transform: rotate(0.5turn);
+transform: skew(30deg, 20deg);
+transform: skewX(30deg);
+transform: skewY(1.07rad);
+transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
+transform: translate3d(12px, 50%, 3em);
+transform: translateZ(2px);
+transform: scale3d(2.5, 1.2, 0.3);
+transform: scaleZ(0.3);
+transform: rotate3d(1, 2.0, 3.0, 10deg);
+transform: rotateX(10deg);
+transform: rotateY(10deg);
+transform: rotateZ(10deg);
+transform: perspective(17px);
+
+/* Multiple function values */
+transform: translateX(10px) rotate(10deg) translateY(5px);
+
+/* Global values */
+transform: inherit;
+transform: initial;
+transform: unset;
+ +
+
+

Valores

+
+
+
<transform-function>
+
Una o más de las funciones de transformación CSS que se aplicarán, ver más abajo.
+
none
+
Especifica que ninguna transformación podrá ser aplicada.
+
+ +

{{cssinfo}}

+

Síntasix formal

+ + 
{{csssyntax}}
+
+
+ +

Ejemplos

+ +

Consulte Uso de las transformaciones CSS.

+ +

Funciones CSS transform

+ +

La propiedad CSS transform permite manipular el sistema de coordenadas de un elemento usando las funciones de transformación. Estas funciones son descritas a continuación:

+ +

matrix

+ +
transform:  matrix(a, c, b, d, tx, ty)
+
+ +

Específica una matriz de transformación 2D compuesta por seis valores a especificar. Esto es el equivalente a la aplicación de una transformación lineal de una matriz (abtxcdty001) \begin{pmatrix} a & b & \mathrm{tx} \\ c & d & \mathrm{ty} \\ 0 & 0 & 1 \end{pmatrix}          de un  mapa coordenadas de un nuevo sistema de coordenadas en un sistema de coordenadas anterior por las siguientes igualdades de la matriz:  (xprevCoordSysyprevCoordSys1)=(abtxcdty001)(xnewCoordSysynewCoordSys1)=(axnewCoordSys+bynewCoordSys+txcxnewCoordSys+dynewCoordSys+ty1) \begin{pmatrix} x_{\mathrm{prevCoordSys}} \\ y_{\mathrm{prevCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & b & \mathrm{tx} \\ c & d & \mathrm{ty} \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{newCoordSys}} \\ y_{\mathrm{newCoordSys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{newCoordSys}} + b y_{\mathrm{newCoordSys}} + \mathrm{tx} \\ c x_{\mathrm{newCoordSys}} + d y_{\mathrm{newCoordSys}} + \mathrm{ty} \\ 1 \end{pmatrix}

+ +
Nota: Viejas versiones de Gecko (Firefox) aceptan un {{cssxref("<length>")}} valor para tx y ty. Actualmente Gecko, junto con Webkit (Safari, Chrome) y Opera, soportan valor sin unidades {{cssxref("<number>")}} para tx y ty.
+ +

Ejemplos realizados

+ +
 background: gold;  width: 30em;
+
+ -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
+      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
+         transform: matrix(1, -0.2, 0, 1, 0, 0);
+
+ +
 background: wheat;
+ max-width: intrinsic;
+
+ -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
+      -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
+         transform: matrix(1, 0, 0.6, 1,  250, 0);
+
+ +

Información adicional

+ + + +

rotate

+ +
transform:  rotate(deg);     /* ej. rotate(90deg) */
+ +

Define una operación de rotación 2D de un elemento, específicando la cantidad de grados (deg) que este rotará en sentido de las macecillas del reloj (según lo especificado por la propiedad transform-origen). La operación corresponde a la matriz [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0].

+ +

rotateX

+ +
transform:  rotateX(deg);    /* ej. rotateX(90deg) */
+ +

Define una operación de rotación 3D de un elemento en el eje X.

+ +

rotateY

+ +
transform:  rotateY(deg);    /* ej. rotateY(90deg) */
+ +

Define una operación de rotación 3D de un elemento en el eje Y.

+ +

rotateZ

+ +
transform:  rotateZ(deg);    /* ej. rotateZ(90deg) */
+ +

Define una operación de rotación 3D de un elemento en el eje Z.

+ +

scale

+ +
transform:  scale(sx[, sy]);    /* ej. scale(2.5, 4)*/
+ +

Especifica una operación de escalado 2D descrita por [sx, sy].

+ +
+

Nota: Si sy no es especificado, se asumirá que tanto sx como sy tendrán el mismo valor

+
+ +

scaleX

+ +
transform:  scaleX(sx);     /* ej. scale(2.5)*/
+ +

Especifica una operación de escalado 2D usando el vector [sx, 1].

+ +

scaleY

+ +
transform:  scaleY(sy);    /* ej. scale(4)*/      
+ +

Especifica una operación de escalado 2D usando el vector [1, sy].

+ +

skew

+ +
transform:  skew(ax[, ay]);     /* ej. skew(90deg,180deg)*/
+ +

Sesga el elemento a lo largo del eje X y Y por los ángulos especificados. Si no se proporciona ay, no se llevará a cabo el sesgo del eje Y.

+ +
+

La función skew() fue presentada en los primeros borradores. Esta ha sido removida pero sigue presente en algunas implementaciones. No debe usarse.

+ +

Para lograr el mismo efecto, utilice la función skewX(). Si tu estas usando skew () con un parámetro o matriz (1, tan (ay), tan (ax), 1, 0, 0). Ten en cuenta que tan() no es una función CSS y así que tu mismo tienes que precalcular tus valores.

+
+ +

skewX

+ +
transform:  skewX(deg);     /* ej. skew(90deg)*/
+ +

Sesga un elemento a lo largo del eje X por el ángulo dado.

+ +

skewY

+ +
transform:  skewY(deg);     /* ej. skew(180deg)*/
+ +

Sesga un elemento a lo largo del eje Y por el ángulo dado.

+ +

translate

+ +
transform:  translate(tx[, ty]);     /* ej. translate(50px, 100px) */
+ +

Especifica una tanslación 2D dada por el vector [tx, ty]. Si ty no es específicada, se asumirá que su valor es cero.

+ +

Cada translation-value puede ser un valor de longuitud o un valor de  porcentaje.

+ +

translateX

+ +
transform:  translateX(tx);     /* ej. translateX(50px) */
+ +

Translada un elemento a lo largo del eje X.

+ +

translateY

+ +
transform:  translateY(ty);     /* ej. translateY(100px) */
+ +

Translada un elemento a lo largo del eje Y.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}{{Spec2('CSS Transforms 2')}}Adds 3D transform functions.
{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}{{Spec2('CSS3 Transforms')}}Initial definition.
+ +

Compatibilidad con navegadores

+

{{Compat("css.properties.transform")}}

+

Véase También

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