From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../css/transform-function/translate()/index.html | 152 +++++++++++++++++++++ 1 file changed, 152 insertions(+) create mode 100644 files/pt-br/web/css/transform-function/translate()/index.html (limited to 'files/pt-br/web/css/transform-function/translate()') diff --git a/files/pt-br/web/css/transform-function/translate()/index.html b/files/pt-br/web/css/transform-function/translate()/index.html new file mode 100644 index 0000000000..395dd0e784 --- /dev/null +++ b/files/pt-br/web/css/transform-function/translate()/index.html @@ -0,0 +1,152 @@ +--- +title: translate() +slug: Web/CSS/transform-function/translate() +tags: + - CSS + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/translate() +--- +
{{CSSRef}}
+ +

A função CSS translate() reposiciona um elemento na direção horizontal e/ou vertical. O seu resultado é um tipo de dado {{cssxref("<transform-function>")}}.

+ +

+ +

Esta transformação é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto o elemento se move em cada direção.

+ +

Sintaxe

+ +
/* Valores <length-percentage> únicos */
+transform: translate(200px);
+transform: translate(50%);
+
+/* Valores <length-percentage> duplos */
+transform: translate(100px, 200px);
+transform: translate(100px, 50%);
+transform: translate(30%, 200px);
+transform: translate(30%, 50%);
+
+ +

Valores

+ +
+
Valores <length-percentage> únicos
+
Este valor é um {{cssxref("length")}} ou {{cssxref("percentage")}} representando a abcissa (horizontal, coordenada x) do vetor de translação. A ordenada (vertical, coordenada y) do vetor de translação será definida como 0. Por exemplo, translate(2) é equivalente a translate(2, 0). Um valor percentual refere-se à largura da caixa de referência definida pela propriedade {{cssxref("transform-box")}}.
+
Valores <length-percentage> duplos
+
Este valor descreve dois {{cssxref("length")}} ou valores {{cssxref("percentage")}} representando tanto a abcissa (coordenada x) quanto a ordenada (coordenada y) do vetor de translação. Uma porcentagem como primeiro valor refere-se à largura, como segunda parte da altura da caixa de referência definida pela propedade {{cssxref("transform-box")}}.
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas em ℝ2Coordenadas homogêneas emℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
+

Uma translação não é uma transformação linear em ℝ2 e não pode ser representada usando uma matriz de coordenadas cartesianas.

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

Sintaxe formal

+ +
translate({{cssxref("length-percentage")}} , {{cssxref("length-percentage")}}?)
+
+ +

Exemplos

+ +

Usando uma conversão de eixo único

+ +

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); /* Igual a: translateX(10px) ou translate(10px, 0) */
+  background-color: pink;
+}
+
+ +

Resultado

+ +

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

+ +

Combinando a translação do eixo y e do eixo x

+ +

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)}}

+ +

Especificações

+ + + + + + + + + + + + + + + + +
EspecificaçõesEstadoComentário
{{SpecName('CSS3 Transforms', '#funcdef-transform-translate', 'translate()')}}{{Spec2('CSS3 Transforms')}}Definição inicial
+ +

Compatibilidade de navegador

+ +

Verifique o tipo de dado <transform-function> para informações de compatibilidade.

+ +

Veja também

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