From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- .../css/transform-function/translate()/index.html | 146 --------------------- 1 file changed, 146 deletions(-) delete mode 100644 files/es/web/css/transform-function/translate()/index.html (limited to 'files/es/web/css/transform-function/translate()/index.html') diff --git a/files/es/web/css/transform-function/translate()/index.html b/files/es/web/css/transform-function/translate()/index.html deleted file mode 100644 index 26562a503c..0000000000 --- a/files/es/web/css/transform-function/translate()/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: translate() -slug: Web/CSS/transform-function/translate() -tags: - - CSS - - CSS Function - - CSS Transforms - - Función CSS - - Referencia -translation_of: Web/CSS/transform-function/translate() ---- -
{{CSSRef}}
- -

La function de CSS translate() recoloca un elemento en el eje horizontal y/o vertical. Su resultado es de tipo {{cssxref("<transform-function>")}}.

- -

- -

Esta transformacion esta compuesta por un vector bidimensional cuyas coordenadas definen cuanto se movera el elemente en cada dirección.

- -

Sintaxis

- -

La function translate() esta especificada con uno o dos valores.

- -
translate(tx)
-
-translate(tx, ty)
-
- -

Valores

- -
-
tx
-
Es un {{cssxref("<length>")}} que representa la absisa (coordenada x) del vector de translación.
-
ty
-
Es un {{cssxref("<length>")}} que representa las ordenadas (coordenada y) del vector de translación. Si no se especifica, su valor es 0. Por ejemplo, translate(2) es equivalente a translate(2, 0).
-
- - - - - - - - - - - - - - - - - - - - - -
Coordenadas cartesianas en ℝ2Coordenadas homogeneas en ℝℙ2 -

Coordenadas cartesianas en ℝ3

- 		Coordenadas homogeneas en ℝℙ3
-

Una translación no es una transformación lineal en ℝ2 y no puede ser representada usando una matriz de coordenadas cartesianas.

- 		10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]
- -

Ejemplos

- -

Translación en un solo eje

- -

HTML

- -
<div>Estático</div>
-<div class="moved">Movido</div>
-<div>Estático</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translate(10px); /* Equivalente a translateX(10px) */
-  background-color: pink;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Using_a_single-axis_translation", 250, 250)}}

- -

Translación combinada en los ejes X e Y

- -

HTML

- -
<div>Estático</div>
-<div class="moved">Movido</div>
-<div>Estático</div>
- -

CSS

- -
div {
-  width: 60px;
-  height: 60px;
-  background-color: skyblue;
-}
-
-.moved {
-  transform: translate(10px, 10px);
-  background-color: pink;
-}
-
- -

Resultado

- -

{{EmbedLiveSample("Combining_y-axis_and_x-axis_translation", 250, 250)}}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}Definición inicial
- -

Compatibilidad con navegadores

- -

Ver el tipo de datos <transform-function> para la información de compatibilidad.

- -

Véase también

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