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/css_transforms/index.html | 145 ++++++++++++++ .../css_transforms/using_css_transforms/index.html | 222 +++++++++++++++++++++ 2 files changed, 367 insertions(+) create mode 100644 files/pt-br/web/css/css_transforms/index.html create mode 100644 files/pt-br/web/css/css_transforms/using_css_transforms/index.html (limited to 'files/pt-br/web/css/css_transforms') diff --git a/files/pt-br/web/css/css_transforms/index.html b/files/pt-br/web/css/css_transforms/index.html new file mode 100644 index 0000000000..56f6df6745 --- /dev/null +++ b/files/pt-br/web/css/css_transforms/index.html @@ -0,0 +1,145 @@ +--- +title: CSS Transforms +slug: Web/CSS/CSS_Transforms +translation_of: Web/CSS/CSS_Transforms +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.

+ +

Referencia

+ +

CSS Properties

+ +
+ +
+ +

Guides

+ +
+
Using CSS transforms
+
Step-by-step tutorial about how to transform elements styled with CSS.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transforms') }}{{ Spec2('CSS3 Transforms') }}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support +

{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ 36

+ 		{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}[1]
+ {{CompatGeckoDesktop("16.0")}}[2]		9.0{{property_prefix("-ms")}}[3]
+ 10.0		10.5{{property_prefix("-o")}}
+ 12.10
+ 15.0{{property_prefix("-webkit")}}
+ 23		3.1{{property_prefix("-webkit")}}
3D Support12.0{{property_prefix("-webkit")}}
+ 36		10.0{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10.015.0{{property_prefix("-webkit")}}
+ 23		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatAndroid(2.1)}}{{property_prefix("-webkit")}}[4]{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+ 11.0{{property_prefix("-webkit")}}[5]		11.5{{property_prefix("-webkit")}}3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
3D Support{{CompatAndroid(3.0)}}{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{ property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}22{{property_prefix("-webkit")}}3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +

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

+ +

[2] Before Firefox 16, the translation values of matrix() and matrix3d() could be {{cssxref("<length>")}}, in addition to the standard {{cssxref("<number>")}}.

+ +

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

+ +

Internet Explorer 9.0 or earlier has no support for 3D transforms, mixing 3D and 2D transform functions. such as -ms-transform:rotate(10deg) translateZ(0); will prevent the entire property from being applied.

+ +

[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.

+ +

[5] Internet Explorer 11.0 supports the {{property_prefix("-webkit")}} prefixed variant as an alias for the default one.

+ +

 

diff --git a/files/pt-br/web/css/css_transforms/using_css_transforms/index.html b/files/pt-br/web/css/css_transforms/using_css_transforms/index.html new file mode 100644 index 0000000000..168cc81c3d --- /dev/null +++ b/files/pt-br/web/css/css_transforms/using_css_transforms/index.html @@ -0,0 +1,222 @@ +--- +title: Usando CSS transforms +slug: Web/CSS/CSS_Transforms/Using_CSS_transforms +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +
{{CSSRef}}
+ +

Mudando coordenadas no espaço da tela o CSS transforms permite que a posição do conteúdo afetado seja alterada sem afetar o fluxo de informação da página. Elas são implementadas usando um conjunto de propriedades CSS que permitem alterações lineares em elementos HTML. Essas alterações incluem rotação, inclinações, alteração da escala e tradução tanto em 2D quanto em 3D.

+ +

Propriedades de CSS transforms

+ +

Duas propriedades principais são usadas para definir o CSS transforms: {{ cssxref("transform") }} and {{ cssxref("transform-origin") }}

+ +
+
{{ cssxref("transform-origin") }}
+
Define a posição de origem do elemento. Por padrão esta posição é o canto superior esquerdo do elemento e pode ser movido. É utilizado para muitas alterações, como rotação, alteração de escala e inclinação, que precisam de um ponto especifico como parâmetro.
+
{{ cssxref("transform") }}
+
Define qual alteração será feita no elemento. Pode-se usar mais de um efeito separado-os por um espaço. Tais efeitos serão aplicados um após o outro, na ordem determinada no código.
+
+ +

Exemplo: Rotação

+ +

Este exemplo cria um iframe que permite que a página inicial do Google seja utilizada com uma rotação de 90 graus a partir do canto inferior esquerdo

+ +

Veja um exemplo funcionando
+ Veja uma foto do exemplo

+ +
<div style="transform: rotate(90deg); transform-origin: bottom left;">
+  <iframe src="http://www.google.com/" width="500" height="600"></iframe>
+</div>
+
+ +

Example: Inclinando e Movendo

+ +

Este exemplo cria um iframe que permite que você use a página inicial do Google inclinada em 10 graus no eixo X.

+ +

Veja um exemplo funcionando
+ View uma foto do exemplo

+ +
<div style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;">
+  <iframe src="http://www.google.com/" width="600" height="500"></iframe>
+</div>
+
+ +

Propriedades especificas 3D do CSS

+ +

Trabalhar com propriedades CSS em 3D é um pouco mais difícil. Você tem que começar configurando o espaço 3D dando perspectiva a ele, então você tem que configurar como os elementos 2D irão se comportar no espaço.

+ +

Configurando uma perspectiva

+ +

O primeiro elemento a ser configurado é a perspectiva. É ela a responsável pela sensação de 3D. Quanto mais longe o objeto estiver do usuário, menor ele é.

+ +

Quanto será a sensação de encolhimento é definida pela propriedade {{ cssxref("perspective") }}. Quanto menor o valor, mais profundidade terá o objeto.

+ +
+ + + + + + + + + + + + + + + +
perspective:0;perspective:150px;perspective:300px;perspective:600px;
+
+
+
   
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
   
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
   
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
   
+ +
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+
+
+ +

O segundo elemento a ser configurado é a posição de visão, que será definida pela propriedade {{ cssxref("perspective-origin") }}. Por padrão a perspectiva é centralizada, o que nem sempre é o ideal.

+ +
+ + + + + + + + + + + + + +
perspective-origin:150px 150px;perspective-origin:50% 50%;perspective-origin:-50px -50px;
+
+
+
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+ 		+
+
+
1
+ +
2
+ +
3
+ +
4
+ +
5
+ +
6
+
+
+
+
+ +

Feito isso, você pode trabalhar com elementos 3D.

+ +

Elementos 2D em espaço 3D

+ +

Veja também

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