From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/transform-function/index.html | 227 +++++++++++++++++++++ .../web/css/transform-function/matrix()/index.html | 111 ++++++++++ .../transform-function/perspective()/index.html | 123 +++++++++++ .../web/css/transform-function/rotate()/index.html | 85 ++++++++ .../css/transform-function/rotate3d()/index.html | 127 ++++++++++++ .../web/css/transform-function/scale()/index.html | 125 ++++++++++++ .../css/transform-function/translate()/index.html | 152 ++++++++++++++ 7 files changed, 950 insertions(+) create mode 100644 files/pt-br/web/css/transform-function/index.html create mode 100644 files/pt-br/web/css/transform-function/matrix()/index.html create mode 100644 files/pt-br/web/css/transform-function/perspective()/index.html create mode 100644 files/pt-br/web/css/transform-function/rotate()/index.html create mode 100644 files/pt-br/web/css/transform-function/rotate3d()/index.html create mode 100644 files/pt-br/web/css/transform-function/scale()/index.html create mode 100644 files/pt-br/web/css/transform-function/translate()/index.html (limited to 'files/pt-br/web/css/transform-function') diff --git a/files/pt-br/web/css/transform-function/index.html b/files/pt-br/web/css/transform-function/index.html new file mode 100644 index 0000000000..edb6589b7f --- /dev/null +++ b/files/pt-br/web/css/transform-function/index.html @@ -0,0 +1,227 @@ +--- +title: +slug: Web/CSS/transform-function +tags: + - CSS + - CSS Data Type + - CSS Transforms + - Layout + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/transform-function +--- +
{{CSSRef}}
+ +

The <transform-function> CSS data type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the {{cssxref("transform")}} property.

+ +

Describing transformations mathematically

+ +

Various coordinate models can be used to describe an HTML element's size and shape, as well as any transformations applied to it. The most common is the Cartesian coordinate system, although homogeneous coordinates are also sometimes used.

+ +

Cartesian coordinates

+ +

In the Cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation (x, y).

+ +

In CSS (and most computer graphics), the origin (0, 0) represents the top-left corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that's 2 units to the right and 5 units down would be (2, 5), while a point 3 units to the left and 12 units up would be (-3, -12).

+ +

Transformation functions

+ +

Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2x2 matrix, like this:

+ +
+

ac bd

+
+ +

The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:

+ +
+ +


+ It is even possible to apply several transformations in a row:

+ +
+ +


+ With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.

+ +

However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector (tx, ty) must be expressed separately, as two additional parameters.

+ +
+

Note: Though trickier than Cartesian coordinates, homogeneous coordinates in projective geometry lead to 3x3 transformation matrices, and can simply express translations as linear functions.

+
+ +

Syntax

+ +

The <transform-function> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.

+ +

Matrix transformation

+ +
+
{{cssxref("transform-function/matrix","matrix()")}}
+
Describes a homogeneous 2D transformation matrix.
+
{{cssxref("transform-function/matrix3d","matrix3d()")}}
+
Describes a 3D transformation as a 4x4 homogeneous matrix.
+
+ +

Perspective

+ +
+
{{cssxref("transform-function/perspective","perspective()")}}
+
Sets the distance between the user and the z=0 plane.
+
+ +

Rotation

+ +
+
{{cssxref("transform-function/rotate","rotate()")}}
+
Rotates an element around a fixed point on the 2D plane.
+
{{cssxref("transform-function/rotate3d","rotate3d()")}}
+
Rotates an element around a fixed axis in 3D space.
+
{{cssxref("transform-function/rotateX","rotateX()")}}
+
Rotates an element around the horizontal axis.
+
{{cssxref("transform-function/rotateY","rotateY()")}}
+
Rotates an element around the vertical axis.
+
{{cssxref("transform-function/rotateZ","rotateZ()")}}
+
Rotates an element around the z-axis.
+
+ +

Scaling (resizing)

+ +
+
{{cssxref("transform-function/scale","scale()")}}
+
Scales an element up or down on the 2D plane.
+
{{cssxref("transform-function/scale3d","scale3d()")}}
+
Scales an element up or down in 3D space.
+
{{cssxref("transform-function/scaleX","scaleX()")}}
+
Scales an element up or down horizontally.
+
{{cssxref("transform-function/scaleY","scaleY()")}}
+
Scales an element up or down vertically.
+
{{cssxref("transform-function/scaleZ","scaleZ()")}}
+
Scales an element up or down along the z-axis.
+
+ +

Skewing (distortion)

+ +
+
{{cssxref("transform-function/skew","skew()")}}
+
Skews an element on the 2D plane.
+
{{cssxref("transform-function/skewX","skewX()")}}
+
Skews an element in the horizontal direction.
+
{{cssxref("transform-function/skewY","skewY()")}}
+
Skews an element in the vertical direction.
+
+ +

Translation (moving)

+ +
+
{{cssxref("transform-function/translate","translate()")}}
+
Translates an element on the 2D plane.
+
{{cssxref("transform-function/translate3d","translate3d()")}}
+
Translates an element in 3D space.
+
{{cssxref("transform-function/translateX","translateX()")}}
+
Translates an element horizontally.
+
{{cssxref("transform-function/translateY","translateY()")}}
+
Translates an element vertically.
+
{{cssxref("transform-function/translateZ","translateZ()")}}
+
Translates an element along the z-axis.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}{{Spec2('CSS3 Transforms')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}[1]9.0[2]
+ 10.0		10.53.1
3D Support12.0{{CompatGeckoDesktop("10.0")}}10.015.04.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatAndroid(2.1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}11.53.2
3D Support{{CompatAndroid(3.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}223.2
+
+ +

[1] Gecko 14.0 removed experimental support for skew(), but it was reintroduced in Gecko 15.0. Before Firefox 16, the translation values of matrix() and matrix3d() could be {{cssxref("<length>")}}s, in addition to the standard {{cssxref("<number>")}}.

+ +

[2] Internet Explorer 5.5 and later support a proprietary Matrix Filter which can be used to achieve a similar effect. Internet Explorer 9.0 supports 2D but not 3D transforms. Thus, mixing 2D and 3D transform functions in this browser (e.g., -ms-transform: rotate(10deg) translateZ(0);) will invalidate the entire property.

+ +

See also

+ + diff --git a/files/pt-br/web/css/transform-function/matrix()/index.html b/files/pt-br/web/css/transform-function/matrix()/index.html new file mode 100644 index 0000000000..36c7796d1f --- /dev/null +++ b/files/pt-br/web/css/transform-function/matrix()/index.html @@ -0,0 +1,111 @@ +--- +title: matrix() +slug: Web/CSS/transform-function/matrix() +translation_of: Web/CSS/transform-function/matrix() +--- +
{{CSSRef}}
+ +

A função CSS matrix() define uma matriz de transformação 2D homogênea. Isso resulta em um dado do tipo {{cssxref("<transform-function>")}} .

+ +
+

Note: matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

+
+ +

Syntax

+ +

The matrix() function is specified with six values. The constant values are implied and not passed as parameters; the other parameters are described in the column-major order.

+ +
Note: Until Firefox 16, Gecko accepted a {{cssxref("<length>")}} value for tx and ty.
+ +
matrix(a, b, c, d, tx, ty)
+
+ +

Values

+ +
+
a b c d
+
Are {{cssxref("<number>")}}s describing the linear transformation.
+
tx ty
+
Are {{cssxref("<number>")}}s describing the translation to apply.
+
+ + + + + + + + + + + + + + + + + + + + + +
Cartesian coordinates on ℝ2Homogeneous coordinates on ℝℙ2Cartesian coordinates on ℝ3Homogeneous coordinates on ℝℙ3
ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001
[a b c d tx ty]
+ +

The values represent the following functions:
+ matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

+ +

Examples

+ +

HTML

+ +
<div>Normal</div>
+<div class="changed">Changed</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.changed {
+  transform: matrix(1, 2, -1, 1, 80, 80);
+  background-color: pink;
+}
+ +

Result

+ +

{{EmbedLiveSample("Examples", 350, 350)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Transforms", "#funcdef-transform-matrix", "matrix()")}}{{Spec2("CSS3 Transforms")}}Initial definition
+ +

Browser compatibility

+ +

Please see the <transform-function> data type for compatibility info.

+ +

See also

+ + diff --git a/files/pt-br/web/css/transform-function/perspective()/index.html b/files/pt-br/web/css/transform-function/perspective()/index.html new file mode 100644 index 0000000000..9a16ed1cea --- /dev/null +++ b/files/pt-br/web/css/transform-function/perspective()/index.html @@ -0,0 +1,123 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective() +tags: + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/perspective() +--- +
{{CSSRef}}
+ +

A função CSS perspective() define uma transformação que configura a distância entre o usuário e o plano z=0. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.

+ +

Sintaxe

+ +

A distância de perspectiva usada porperspective() é especificada por um valor {{cssxref("<length>")}}, que representa a distância entre o usuário e o plano z=0. Um valor positivo faz o elemento parecer mais perto do usuário, e um valor negativo o faz parecer mais longe.

+ +
perspective(d)
+
+ +

Valores

+ +
+
d
+
É um {{cssxref("<length>")}} representando a distância do usuário até o plano z=0. Se for 0 ou um valor negativo, nenhuma transformação de perspectiva é aplicada.
+
+ + + + + + + + + + + + + + + + + +
Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
+

Essa transformação se aplica ao espaço 3D e não pode ser representada no plano.

+ 		Essa não é uma transformação linear em ℝ3, e não pode ser representada usando uma matriz de coordenadas cartesianas. 10000100001000−1/d1
+ +

Exemplos

+ +

HTML

+ +
<p>Sem perspectiva:</p>
+<div class="no-perspective-box">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+<p>Com perspectiva (7.5cm):</p>
+<div class="perspective-box">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+ +

CSS

+ +
.face {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  font-size: 100px;
+  text-align: center;
+}
+
+.no-perspective-box {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  transform: rotateX(-15deg) rotateY(15deg);
+  margin-left: 100px;
+}
+
+.perspective-box {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  transform: perspective(7.5cm) rotateX(-15deg) rotateY(15deg);
+  margin-left: 100px;
+}
+
+.top {
+  background-color: skyblue;
+  transform: rotateX(90deg) translate3d(0, 0, 50px);
+}
+
+.left {
+  background-color: pink;
+  transform: rotateY(-90deg) translate3d(0, 0, 50px);
+}
+
+.front {
+  background-color: limegreen;
+  transform: translate3d(0, 0, 50px);
+}
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Examples', '250', '350') }}

+ +

Compatibilidade de browser

+ +

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

+ +

Ver também

+ + diff --git a/files/pt-br/web/css/transform-function/rotate()/index.html b/files/pt-br/web/css/transform-function/rotate()/index.html new file mode 100644 index 0000000000..5f7b4270d0 --- /dev/null +++ b/files/pt-br/web/css/transform-function/rotate()/index.html @@ -0,0 +1,85 @@ +--- +title: rotate() +slug: Web/CSS/transform-function/rotate() +translation_of: Web/CSS/transform-function/rotate() +--- +

{{CSSRef}}

+ +

A função CSS rotate() define uma transformação que gira um elemento em torno de um ponto fixo no plano 2D, sem deformá-lo. O resultado é um tipo de dados {{cssxref("<transform-function>")}}.

+ +

+ +

O eixo de rotação passa por uma origem, definido pela propriedade CSS {{ cssxref("transform-origin") }}.

+ +

Sintaxe

+ +

A quantidade de rotação criada por rotate() é especificado por um {{cssxref("<angle>")}}. Se positivo, o movimento será no sentido horário; Se negativo, ela será no sentido anti-horário. Uma rotação de 180° é chamada de point reflection (reflexão do ponto).

+ +
rotate(a)
+
+ +

Valores

+ +
+
a
+
É um {{ cssxref("<angle>") }} representando o ângulo da rotação. Um ângulo positivo indica uma rotação no sentido horário, um ângulo negativo no sentido anti-horário.
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001
[cos(a) sin(a) -sin(a) cos(a) 0 0]
+ +

Exemplos

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotated</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate(45deg); /* Equal to rotateZ(45deg) */
+  background-color: pink;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Examples", "auto", 180)}}

+ +

Compatibilidade do navegador

+ +

Por favor, veja o tipo de dados <transform-function> para informações de compatibilidade.

+ +

Veja também

+ + diff --git a/files/pt-br/web/css/transform-function/rotate3d()/index.html b/files/pt-br/web/css/transform-function/rotate3d()/index.html new file mode 100644 index 0000000000..b61d4e5b4b --- /dev/null +++ b/files/pt-br/web/css/transform-function/rotate3d()/index.html @@ -0,0 +1,127 @@ +--- +title: rotate3d() +slug: Web/CSS/transform-function/rotate3d() +tags: + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/rotate3d() +--- +
{{CSSRef}}
+ +

A função CSS rotate3d() define uma transformação que gira um elemento em torno de um eixo fixo no espaço 3D, sem deformá-lo. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.

+ +

No espaço 3D, rotações têm três graus de liberdade que, juntos, descrevem um único eixo de rotação. O eixo de rotação é definido por um vetor [x, y, z] e passado pela origem (como definido pela propriedade {{ cssxref("transform-origin") }}). Se, como especificado, o vetor não for normalizado (isto é, se a soma dos quadrados das suas três coordenadas não for 1), o {{glossary("user agent")}} irá normalizá-lo internamente. Um vetor não-normalizável, como o vetor nulo [0, 0, 0], fará com que a rotação seja ignorada, mas sem invalidar toda a propriedade CSS.

+ +
Nota: Diferente de rotações no plano 2D, a composição de rotações 3D normalmente não é comutativa. Em outras palavras, a ordem na qual as rotações são aplicadas impacta o resultado.
+ +

Sintaxe

+ +

A quantidade de rotação criada por rotate3d() é especificada por três {{cssxref("<number>")}} e um {{cssxref("<angle>")}}. Os <number> representam as coordenadas x, y e z do vetor, denotando o eixo de rotação. O <angle> representa o ângulo de rotação; se positivo, o movimento será no sentido horário; se negativo, será no sentido anti-horário.

+ +
rotate3d(x, y, z, a)
+
+ +

Valores

+ +
+
x
+
É um {{cssxref("<number>")}} descrevendo a coordenada x do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
+
y
+
É um {{cssxref("<number>")}} descrevendo a coordenada y do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
+
z
+
É um {{cssxref("<number>")}} descrevendo a coordenada z do vetor denotando o eixo de rotação que pode ser entre 0 e 1.
+
a
+
É um {{ cssxref("<angle>") }} representando o ângulo de rotação. Um ângulo positivo denota uma rotação no sentido horário, e um negativo no sentido anti-horário.
+
+ + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas em ℝ2Essa transformação se aplica ao plano 3D e não pode ser representada em um plano.
Coordenadas homogêneas em ℝℙ2
Coordenadas cartesianas em ℝ3 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001
Coordenadas homogêneas em ℝℙ3
+ +

Exemplos

+ +

Rotacionando no eixo y

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotacionado</div>
+ +

CSS

+ +
body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(0, 1, 0, 60deg);
+  background-color: pink;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Rotating_on_the_y-axis", "auto", 180)}}

+ +

Rotacionando em um eixo customizado

+ +

HTML

+ +
<div>Normal</div>
+<div class="rotated">Rotacionado</div>
+ +

CSS

+ +
body {
+  perspective: 800px;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.rotated {
+  transform: rotate3d(1, 2, -1, 192deg);
+  background-color: pink;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Rotating_on_a_custom_axis", "auto", 180)}}

+ +

Compatibilidade de browser

+ +

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

+ +

Ver também

+ + diff --git a/files/pt-br/web/css/transform-function/scale()/index.html b/files/pt-br/web/css/transform-function/scale()/index.html new file mode 100644 index 0000000000..c874f81954 --- /dev/null +++ b/files/pt-br/web/css/transform-function/scale()/index.html @@ -0,0 +1,125 @@ +--- +title: scale() +slug: Web/CSS/transform-function/scale() +tags: + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/scale() +--- +
{{CSSRef}}
+ +

A função CSS scale() define uma transformação que redimensiona um elemento no plano 2D. Como o redimensionamento é definido por um vetor, ele pode transformar as dimensões verticais e horizontais em escalas diferentes. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.

+ +

+ +

Essa transformação de redimensionamento é caracterizada por um vetor bidimensional. Suas coordenadas definem o quanto cada direção deve ser redimensionada. Se as duas coordenadas forem iguais, o redimensionamento é uniforme (isotrópico) e a proporção do elemento é preservada (isto é uma transformação homotética).

+ +

Quando o valor de uma coordenada está fora do alcance [-1, 1], o elemento cresce ao longo daquela dimensão; quando está dentro, ele encolhe. Se for negativo, o resultado é um ponto de reflexão naquela dimensão. O valor 1 não tem efeito.

+ +
Nota: A função scale() apenas redimensiona em 2D Para redimensionar em 3D, use scale3d() ao invés.
+ +

Sintaxe

+ +

A função scale() é especificada com um ou dois valores, que representam a quantidade de redimensionamento a ser aplicada em cada direção.

+ +
scale(sx)
+
+scale(sx, sy)
+
+ +

Valores

+ +
+
sx
+
Um {{cssxref("<number>")}} representando a abscissa do vetor de redimensionamento.
+
sy
+
Um {{cssxref("<number>")}} representando a ordenada do vetor de redimensionamento. Se não for definida, seu valor padrão ésx, resultando em um redimensionamento uniforme que preserva a proporção do elemento.
+
+ + + + + + + + + + + + + + + + + + + + + +
Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
sx0 0sy sx000sy0001 sx000sy0001 sx0000sy0000100001
[sx 0 0 sy 0 0]
+ +

Exemplos

+ +

Redimensionando as dimensões X e Y juntas

+ +

HTML

+ +
<div>Normal</div>
+<div class="scaled">Redimensionado</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
+  background-color: pink;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Scaling_the_X_and_Y_dimensions_together", "200", "200")}}

+ +

Redimensionando dimensões X e Y separadamente e transladando a origem

+ +

HTML

+ +
<div>Normal</div>
+<div class="scaled">Redimensionado</div>
+ +

CSS

+ +
div {
+  width: 80px;
+  height: 80px;
+  background-color: skyblue;
+}
+
+.scaled {
+  transform: scale(2, 0.5); /* Igual a scaleX(2) scaleY(0.5) */
+  transform-origin: left;
+  background-color: pink;
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample("Scaling_X_and_Y_dimensions_separately_and_translating_the_origin", "200", "200")}}

+ +

Compatibilidade de browser

+ +

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

+ +

Ver também

+ + 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