From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../css/transform-function/translate()/index.html | 146 +++++++++++++++++++++ 1 file changed, 146 insertions(+) create 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 new file mode 100644 index 0000000000..26562a503c --- /dev/null +++ b/files/es/web/css/transform-function/translate()/index.html @@ -0,0 +1,146 @@ +--- +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