1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
|
---
title: Usando CSS transforms
slug: Web/CSS/CSS_Transforms/Using_CSS_transforms
translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
---
<div>{{CSSRef}}</div>
<p>Mudando coordenadas no espaço da tela o <strong>CSS transforms </strong>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.</p>
<h2 id="Propriedades_de_CSS_transforms">Propriedades de CSS transforms</h2>
<p>Duas propriedades principais são usadas para definir o CSS transforms: {{ cssxref("transform") }} and {{ cssxref("transform-origin") }}</p>
<dl>
<dt>{{ cssxref("transform-origin") }}</dt>
<dd>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.</dd>
<dt>{{ cssxref("transform") }}</dt>
<dd>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.</dd>
</dl>
<h3 id="Exemplo_Rotação">Exemplo: Rotação</h3>
<p>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</p>
<p><a class="internal" href="/@api/deki/files/2921/=rotated-google-sample.html" title="/@api/deki/files/2921/=rotated-google-sample.html">Veja um exemplo funcionando</a><br>
<a class="internal" href="/@api/deki/files/2920/=google-rotated.png" title="/@api/deki/files/2920/=google-rotated.png">Veja uma foto do exemplo</a></p>
<pre class="brush: html"><div style="transform: rotate(90deg); transform-origin: bottom left;">
<iframe src="http://www.google.com/" width="500" height="600"></iframe>
</div>
</pre>
<h3 id="Example_Inclinando_e_Movendo">Example: Inclinando e Movendo</h3>
<p>Este exemplo cria um iframe que permite que você use a página inicial do Google inclinada em 10 graus no eixo X.</p>
<p><a class="external" href="/@api/deki/files/2922/=skewed-google-sample.html" title="http://developer.mozilla.org/editor/fckeditor/core/editor/@api/deki/files/2922/=skewed-google-sample.html">Veja um exemplo funcionando</a><br>
<a class="internal" href="/@api/deki/files/2923/=skewed-google.png" title="/@api/deki/files/2923/=skewed-google.png">View uma foto do exemplo</a></p>
<pre class="brush: html"><div style="transform: skewx(10deg) translatex(150px);
transform-origin: bottom left;">
<iframe src="http://www.google.com/" width="600" height="500"></iframe>
</div>
</pre>
<h2 id="Propriedades_especificas_3D_do_CSS">Propriedades especificas 3D do CSS</h2>
<p>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.</p>
<h3 id="Configurando_uma_perspectiva">Configurando uma perspectiva</h3>
<p>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 é.</p>
<p>Quanto será a sensação de encolhimento é definida pela propriedade {{ cssxref("perspective") }}. Quanto menor o valor, mais profundidade terá o objeto.</p>
<div>
<table class="standard-table">
<tbody>
<tr>
<td><code>perspective:0;</code></td>
<td><code>perspective:150px;</code></td>
<td><code>perspective:300px;</code></td>
<td><code>perspective:600px;</code></td>
</tr>
<tr>
<td>
<div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
<div class="cube" style="width: 100%; height: 100%; -moz-perspective: 0; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;">
<div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div>
<div class="front" style="">1</div>
<div class="back" style="">2</div>
<div class="right" style="">3</div>
<div class="left" style="">4</div>
<div class="top" style="">5</div>
<div class="bottom" style="">6</div>
</div>
</div>
</td>
<td>
<div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
<div class="cube" style="width: 100%; height: 100%; -moz-perspective: 150px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;">
<div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div>
<div class="front" style="">1</div>
<div class="back" style="">2</div>
<div class="right" style="">3</div>
<div class="left" style="">4</div>
<div class="top" style="">5</div>
<div class="bottom" style="">6</div>
</div>
</div>
</td>
<td>
<div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
<div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;">
<div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div>
<div class="front" style="">1</div>
<div class="back" style="">2</div>
<div class="right" style="">3</div>
<div class="left" style="">4</div>
<div class="top" style="">5</div>
<div class="bottom" style="">6</div>
</div>
</div>
</td>
<td>
<div class="container" style="width: 200px; height: 200px; margin: 75px 0 0 75px; border: none;">
<div class="cube" style="width: 100%; height: 100%; -moz-perspective: 600px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;">
<div class="middle" style="display: block; position: absolute; width: 100px; height: 100px; border: 1px dashed black; line-height: 100px; font-family: arial, sans-serif; font-size: 60px; color: white; text-align: center; background: transparent;"> </div>
<div class="front" style="">1</div>
<div class="back" style="">2</div>
<div class="right" style="">3</div>
<div class="left" style="">4</div>
<div class="top" style="">5</div>
<div class="bottom" style="">6</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<p>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.</p>
<div>
<table class="standard-table">
<tbody>
<tr>
<td><code>perspective-origin:150px 150px;</code></td>
<td><code>perspective-origin:50% 50%;</code></td>
<td><code>perspective-origin:-50px -50px;</code></td>
</tr>
<tr>
<td>
<div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;">
<div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 150% 150%;">
<div class="front" style="">1</div>
<div class="back" style="">2</div>
<div class="right" style="">3</div>
<div class="left" style="">4</div>
<div class="top" style="">5</div>
<div class="bottom" style="">6</div>
</div>
</div>
</td>
<td>
<div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;">
<div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: 50% 50%;">
<div class="front" style="">1</div>
<div class="back" style="">2</div>
<div class="right" style="">3</div>
<div class="left" style="">4</div>
<div class="top" style="">5</div>
<div class="bottom" style="">6</div>
</div>
</div>
</td>
<td>
<div class="container" style="width: 100px; height: 100px; margin: 25px; border: none;">
<div class="cube" style="width: 100%; height: 100%; -moz-perspective: 300px; -moz-transform-style: preserve-3d; -moz-perspective-origin: -50% -50%;">
<div class="front" style="">1</div>
<div class="back" style="">2</div>
<div class="right" style="">3</div>
<div class="left" style="">4</div>
<div class="top" style="">5</div>
<div class="bottom" style="">6</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<p>Feito isso, você pode trabalhar com elementos 3D.</p>
<h3 id="Elementos_2D_em_espaço_3D">Elementos 2D em espaço 3D</h3>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/en/Using_Deviceorientation_In_3D_Transforms" title="Using Deviceorientation In 3D Transforms">Usando deviceorientation com 3D Transforms</a></li>
</ul>
|
