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/index.html | 283 +++++++++++++++++++++++++++++++ 1 file changed, 283 insertions(+) create mode 100644 files/pt-br/web/css/transform/index.html (limited to 'files/pt-br/web/css/transform') diff --git a/files/pt-br/web/css/transform/index.html b/files/pt-br/web/css/transform/index.html new file mode 100644 index 0000000000..423a21045c --- /dev/null +++ b/files/pt-br/web/css/transform/index.html @@ -0,0 +1,283 @@ +--- +title: transform +slug: Web/CSS/transform +translation_of: Web/CSS/transform +--- +

{{ CSSRef() }}{{ SeeCompatTable() }}

+ +

Resumo

+ +

A Propriedade CSS transform permite modificar o espaço coordenado do modelo de formatação CSS. Usando-a, elementos podem ser traduzidos, rotacionados, ter seu tamanho ajustado e inclinados de acordo com os valores definidos.

+ +

Se a propriedade tem um valor diferente de none, um contexto de empilhamento será criado. Neste caso, o objeto atuará como um bloco recipiente para  position: fixed para os elementos que estão contidos.

+ +

{{cssinfo}}

+ +

Sintaxe

+ +
Gramática Formal: <transform-função> [<transform-função>]* | none
+
+ +
transform: none
+transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
+transform: translate(12px, 50%)
+transform: translateX(2em)
+transform: translateY(3in)
+transform: scale(2, 0.5)
+transform: scaleX(2)
+transform: scaleY(0.5)
+transform: rotate(0.5turn)
+transform: skewX(30deg)
+transform: skewY(1.07rad)
+transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
+transform: translate3d(12px, 50%, 3em)
+transform: translateZ(2px)
+transform: scale3d(2.5, 1.2, 0.3)
+transform: scaleZ(0.3)
+transform: rotate3d(1, 2.0, 3.0, 10deg)
+transform: rotateX(10deg)
+transform: rotateY(10deg)
+transform: rotateZ(10deg)
+transform: perspective(17px)
+
+transform: translateX(10px) rotate(10deg) translateY(5px)
+
+ +

Valores

+ +
+
<transform-função>
+
Uma ou mais das  {{ anch("funções CSS transform") }} para serem aplicadas, veja abaixo.
+
none
+
Espcifica que nenhuma função transform deve ser aplicada.
+
+ +

Exemplos

+ +

Veja Using CSS transforms.

+ +

Exemplo ao vivo:

+ +
pre {
+     width: 33em;
+     border: solid red;
+
+    -webkit-transform: translate(100px) rotate(20deg);
+    -webkit-transform-origin: 60% 100%;
+
+    -o-transform:translate(100px) rotate(20deg);
+    -o-transform-origin:60% 100%;
+
+    transform: translate(100px) rotate(20deg);
+    transform-origin: 60% 100%;
+}
+
+ +

CSS transform functions

+ +

The transform CSS property allows the coordinate system used by an element to be manipulated using transform functions. These functions are described below.

+ +

matrix

+ +
transform:  matrix(a, c, b, d, tx, ty)
+
+/* Where a, b, c, d build the transformation matrix
+   ┌     ┐
+   │ a b │
+   │ c d │
+   └     ┘
+   and tx, ty are the translate values.  */
+
+ +

Specifies a 2D transformation matrix comprised of the specified six values. This is the equivalent to applying the transformation matrix [a b c d tx ty].

+ +
Note: Gecko (Firefox) accepts a {{cssxref("<length>")}} value for tx and ty. Webkit (Safari, Chrome) and Opera currently support a unitless {{cssxref("<number>")}} for tx and ty.
+ +

Live examples

+ +
 background: gold;  width: 30em;
+
+ -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
+      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
+         transform: matrix(1, -0.2, 0, 1, 0, 0);
+
+ +
 background: wheat;
+ max-width: intrinsic;
+
+ -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
+      -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
+         transform: matrix(1, 0, 0.6, 1,  250, 0);
+
+ +


+ See also

+ + + +

rotate

+ +
transform:  rotate(angle);       /* an <angle>, e.g.  rotate(30deg) */
+ +

Rotates the element clockwise around its origin (as specified by the {{ Cssxref("transform-origin") }} property) by the specified angle. The operation corresponds to the matrix [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0].

+ +

scale

+ +
transform:  scale(sx[, sy]);     /* one or two unitless <number>s, e.g.  scale(2.1,4) */
+ +

Specifies a 2D scaling operation described by [sx, sy]. If sy isn't specified, it is assumed to be equal to sx.

+ +

scaleX

+ +
transform:  scaleX(sx);          /* a unitless <number>, e.g.  scaleX(2.7) */
+ +

Specifies a scale operation using the vector [sx, 1].

+ +

scaleY

+ +
transform:  scaleY(sy)           /* a unitless <number>, e.g.  scaleY(0.3) */
+ +

Specifies a scale operation using the vector [1, sy].

+ +

skew

+ +

{{ non-standard_header() }}

+ +
transform:  skew(ax[, ay])       /* one or two <angle>s, e.g.  skew(30deg,-10deg) */
+ +

Skews the element around the X and Y axes by the specified angles. If ay isn't provided, no skew is performed on the Y axis.

+ +
Note: The skew() function was present in early drafts. It has been removed but is still present in some implementations. Do not use it.
+
+To achieve the same effect, use skewX() if you were using skew() with one parameter or matrix(1, tan(ax), tan(ay), 1, 0, 0) for the general way. Note that tan() isn't a CSS function and you have to precalculate it yourself.
+ +

skewX

+ +
transform:  skewX(angle)         /* an <angle>, e.g.  skewX(-30deg) */
+ +

Skews the element around the X axis by the given angle.

+ +

skewY

+ +
transform:  skewY(angle)         /* an <angle>, e.g.  skewY(4deg) */
+ +

Skews the element around the Y axis by the given angle.

+ +

translate

+ +
transform:  translate(tx[, ty])  /* one or two <length> values */
+ +

Specifies a 2D translation by the vector [tx, ty]. If ty isn't specified, its value is assumed to be zero.

+ +

translateX

+ +
transform:  translateX(tx)       /* see <length> for possible values */
+ +

Translates the element by the given amount along the X axis.

+ +

translateY

+ +
transform:  translateY(ty)       /* see <length> for possible values */
+ +

Translates the element by the given amount along the Y axis.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transforms', '#transform', 'transform') }}{{ Spec2('CSS3 Transforms') }} 
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }}{{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		9.0 {{ property_prefix("-ms") }}
+ 10.0		10.5{{ property_prefix("-o") }}
+ 12.5		3.1{{ property_prefix("-webkit") }}
3D Support12.0{{ property_prefix("-webkit") }}10.0{{ property_prefix("-moz") }}
+ {{ CompatGeckoDesktop("16.0") }}		10.0{{ CompatNo() }}4.0{{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Notes

+ +

Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve the similar effect.

+ +

Gecko 14.0 removed the experimental support for skew(), but it was reintroduced in Gecko 15.0 for compatibility reason. As it is non-standard and will likely be removed in the future, do not use it.

+ +

See also

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