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 | 152 --------------------- 1 file changed, 152 deletions(-) delete mode 100644 files/pt-br/web/css/transform-function/translate()/index.html (limited to 'files/pt-br/web/css/transform-function/translate()/index.html') diff --git a/files/pt-br/web/css/transform-function/translate()/index.html b/files/pt-br/web/css/transform-function/translate()/index.html deleted file mode 100644 index 3a0374d2fe..0000000000 --- a/files/pt-br/web/css/transform-function/translate()/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -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 com navegadores

- -

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

- -

Veja também

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