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
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
|
.apply-origin-2d {
-moz-transform-origin: 2px 5%;
-ms-transform-origin: 2px 5%;
-webkit-transform-origin: 2px 5%;
transform-origin: 2px 5%; }
.apply-origin-3d {
-moz-transform-origin: 2px 5% 2in;
-webkit-transform-origin: 2px 5% 2in;
transform-origin: 2px 5% 2in; }
.transform-origin-2d {
-moz-transform-origin: 100px 100px;
-ms-transform-origin: 100px 100px;
-webkit-transform-origin: 100px 100px;
transform-origin: 100px 100px; }
.transform-origin-3d {
-moz-transform-origin: 100px 100px 100px;
-webkit-transform-origin: 100px 100px 100px;
transform-origin: 100px 100px 100px; }
.transform-2d {
-moz-transform: rotateY(20deg);
-ms-transform: rotateY(20deg);
-webkit-transform: rotateY(20deg);
transform: rotateY(20deg); }
.transform-3d {
-moz-transform: rotateZ(20deg);
-webkit-transform: rotateZ(20deg);
transform: rotateZ(20deg); }
.perspective {
-moz-perspective: 500;
-webkit-perspective: 500;
perspective: 500; }
.perspective-origin {
-moz-perspective-origin: 25% 25%;
-webkit-perspective-origin: 25% 25%;
perspective-origin: 25% 25%; }
.transform-style {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; }
.backface-visibility {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; }
.scale {
-moz-transform: scale(30px, 50px);
-ms-transform: scale(30px, 50px);
-webkit-transform: scale(30px, 50px);
transform: scale(30px, 50px); }
.scale-3d {
-moz-transform: scale(30px, 50px);
-webkit-transform: scale(30px, 50px);
transform: scale(30px, 50px); }
.scale-with-perspective {
-moz-transform: perspective(500) scale(30px, 50px);
-ms-transform: perspective(500) scale(30px, 50px);
-webkit-transform: perspective(500) scale(30px, 50px);
transform: perspective(500) scale(30px, 50px); }
.scale-3d-with-perspective {
-moz-transform: perspective(500) scale(30px, 50px);
-webkit-transform: perspective(500) scale(30px, 50px);
transform: perspective(500) scale(30px, 50px); }
.scale-x {
-moz-transform: scaleX(30px);
-ms-transform: scaleX(30px);
-webkit-transform: scaleX(30px);
transform: scaleX(30px); }
.scale-x-3d {
-moz-transform: scaleX(30px);
-webkit-transform: scaleX(30px);
transform: scaleX(30px); }
.scale-x-with-perspective {
-moz-transform: perspective(500) scaleX(30px);
-ms-transform: perspective(500) scaleX(30px);
-webkit-transform: perspective(500) scaleX(30px);
transform: perspective(500) scaleX(30px); }
.scale-x-3d-with-perspective {
-moz-transform: perspective(500) scaleX(30px);
-webkit-transform: perspective(500) scaleX(30px);
transform: perspective(500) scaleX(30px); }
.scale-y {
-moz-transform: scaleY(50px);
-ms-transform: scaleY(50px);
-webkit-transform: scaleY(50px);
transform: scaleY(50px); }
.scale-y-3d {
-moz-transform: scaleY(50px);
-webkit-transform: scaleY(50px);
transform: scaleY(50px); }
.scale-y-with-perspective {
-moz-transform: perspective(500) scaleY(50px);
-ms-transform: perspective(500) scaleY(50px);
-webkit-transform: perspective(500) scaleY(50px);
transform: perspective(500) scaleY(50px); }
.scale-y-3d-with-perspective {
-moz-transform: perspective(500) scaleY(50px);
-webkit-transform: perspective(500) scaleY(50px);
transform: perspective(500) scaleY(50px); }
.scale-z {
-moz-transform: scaleZ(50px);
-webkit-transform: scaleZ(50px);
transform: scaleZ(50px); }
.scale-z-with-perspective {
-moz-transform: perspective(500) scaleZ(50px);
-webkit-transform: perspective(500) scaleZ(50px);
transform: perspective(500) scaleZ(50px); }
.scale3d {
-moz-transform: scale3d(30px, 50px, 100px);
-webkit-transform: scale3d(30px, 50px, 100px);
transform: scale3d(30px, 50px, 100px); }
.scaled3-with-perspective {
-moz-transform: perspective(500) scale3d(30px, 50px, 100px);
-webkit-transform: perspective(500) scale3d(30px, 50px, 100px);
transform: perspective(500) scale3d(30px, 50px, 100px); }
.rotate {
-moz-transform: perspective(500) rotate(25deg);
-ms-transform: perspective(500) rotate(25deg);
-webkit-transform: perspective(500) rotate(25deg);
transform: perspective(500) rotate(25deg); }
.rotate-with-perspective {
-moz-transform: perspective(500) rotate(25deg);
-ms-transform: perspective(500) rotate(25deg);
-webkit-transform: perspective(500) rotate(25deg);
transform: perspective(500) rotate(25deg); }
.rotate-z {
-moz-transform: rotate(25deg);
-ms-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
transform: rotate(25deg); }
.rotate-z-with-perspective {
-moz-transform: perspective(500) rotate(25deg);
-ms-transform: perspective(500) rotate(25deg);
-webkit-transform: perspective(500) rotate(25deg);
transform: perspective(500) rotate(25deg); }
.rotate-x {
-moz-transform: rotateX(25deg);
-webkit-transform: rotateX(25deg);
transform: rotateX(25deg); }
.rotate-x-with-perspective {
-moz-transform: perspective(500) rotateX(25deg);
-webkit-transform: perspective(500) rotateX(25deg);
transform: perspective(500) rotateX(25deg); }
.rotate-y {
-moz-transform: rotateY(25deg);
-webkit-transform: rotateY(25deg);
transform: rotateY(25deg); }
.rotate-y-with-perspective {
-moz-transform: perspective(500) rotateY(25deg);
-webkit-transform: perspective(500) rotateY(25deg);
transform: perspective(500) rotateY(25deg); }
.rotate-3d {
-moz-transform: rotate3d(5, 2, 1, 75deg);
-webkit-transform: rotate3d(5, 2, 1, 75deg);
transform: rotate3d(5, 2, 1, 75deg); }
.rotate-3d-with-perspective {
-moz-transform: perspective(500) rotate3d(5, 2, 1, 75deg);
-webkit-transform: perspective(500) rotate3d(5, 2, 1, 75deg);
transform: perspective(500) rotate3d(5, 2, 1, 75deg); }
.translate {
-moz-transform: translate(20px, 30%);
-ms-transform: translate(20px, 30%);
-webkit-transform: translate(20px, 30%);
transform: translate(20px, 30%); }
.translate-with-perspective {
-moz-transform: perspective(500) translate(20px, 30%);
-ms-transform: perspective(500) translate(20px, 30%);
-webkit-transform: perspective(500) translate(20px, 30%);
transform: perspective(500) translate(20px, 30%); }
.translate-3d {
-moz-transform: translate(20px, 30%);
-webkit-transform: translate(20px, 30%);
transform: translate(20px, 30%); }
.translate-3d-with-perspective {
-moz-transform: perspective(500) translate(20px, 30%);
-webkit-transform: perspective(500) translate(20px, 30%);
transform: perspective(500) translate(20px, 30%); }
.translate-x {
-moz-transform: translateX(30px);
-ms-transform: translateX(30px);
-webkit-transform: translateX(30px);
transform: translateX(30px); }
.translate-x-3d {
-moz-transform: translateX(30px);
-webkit-transform: translateX(30px);
transform: translateX(30px); }
.translate-x-with-perspective {
-moz-transform: perspective(500) translateX(30px);
-ms-transform: perspective(500) translateX(30px);
-webkit-transform: perspective(500) translateX(30px);
transform: perspective(500) translateX(30px); }
.translate-x-3d-with-perspective {
-moz-transform: perspective(500) translateX(30px);
-webkit-transform: perspective(500) translateX(30px);
transform: perspective(500) translateX(30px); }
.translate-y {
-moz-transform: translateY(30px);
-ms-transform: translateY(30px);
-webkit-transform: translateY(30px);
transform: translateY(30px); }
.translate-y-3d {
-moz-transform: translateY(30px);
-webkit-transform: translateY(30px);
transform: translateY(30px); }
.translate-y-with-perspective {
-moz-transform: perspective(500) translateY(30px);
-ms-transform: perspective(500) translateY(30px);
-webkit-transform: perspective(500) translateY(30px);
transform: perspective(500) translateY(30px); }
.translate-y-3d-with-perspective {
-moz-transform: perspective(500) translateY(30px);
-webkit-transform: perspective(500) translateY(30px);
transform: perspective(500) translateY(30px); }
.translate-z {
-moz-transform: translateZ(30px);
-webkit-transform: translateZ(30px);
transform: translateZ(30px); }
.translate-z-with-perspective {
-moz-transform: perspective(500) translateZ(30px);
-webkit-transform: perspective(500) translateZ(30px);
transform: perspective(500) translateZ(30px); }
.translate-3d {
-moz-transform: translate3d(30px, 50px, 75px);
-webkit-transform: translate3d(30px, 50px, 75px);
transform: translate3d(30px, 50px, 75px); }
.translate-3d-with-perspective {
-moz-transform: perspective(500) translate3d(30px, 50px, 75px);
-webkit-transform: perspective(500) translate3d(30px, 50px, 75px);
transform: perspective(500) translate3d(30px, 50px, 75px); }
.skew {
-moz-transform: skew(20deg, 50deg);
-ms-transform: skew(20deg, 50deg);
-webkit-transform: skew(20deg, 50deg);
transform: skew(20deg, 50deg); }
.skew-3d {
-moz-transform: skew(20deg, 50deg);
-webkit-transform: skew(20deg, 50deg);
transform: skew(20deg, 50deg); }
.skew-x {
-moz-transform: skewX(20deg);
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg); }
.skew-x-3d {
-moz-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg); }
.skew-y {
-moz-transform: skewY(20deg);
-ms-transform: skewY(20deg);
-webkit-transform: skewY(20deg);
transform: skewY(20deg); }
.skew-y-3d {
-moz-transform: skewY(20deg);
-webkit-transform: skewY(20deg);
transform: skewY(20deg); }
.create-transform-2d {
-moz-transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
-ms-transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
-webkit-transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
transform: perspective(500) scale(20px, 20px) rotateX(25deg) rotateY(25deg) rotate3d(false 50px) translateX(50px) translateZ(50deg) skew(50deg, 50%);
-moz-transform-origin: 50%;
-ms-transform-origin: 50%;
-webkit-transform-origin: 50%;
transform-origin: 50%; }
.create-transform-3d {
-moz-transform: perspective(500) scale3d(20px, 20px, 20px) rotateX(25deg) rotateY(25deg) rotateZ(25deg) rotate3d(false 50px) translate3d(50px, 50px, 50deg) skew(50deg, 50%);
-ms-transform: perspective(500) scale3d(20px, 20px, 20px) rotateX(25deg) rotateY(25deg) rotateZ(25deg) rotate3d(false 50px) translate3d(50px, 50px, 50deg) skew(50deg, 50%);
-webkit-transform: perspective(500) scale3d(20px, 20px, 20px) rotateX(25deg) rotateY(25deg) rotateZ(25deg) rotate3d(false 50px) translate3d(50px, 50px, 50deg) skew(50deg, 50%);
transform: perspective(500) scale3d(20px, 20px, 20px) rotateX(25deg) rotateY(25deg) rotateZ(25deg) rotate3d(false 50px) translate3d(50px, 50px, 50deg) skew(50deg, 50%);
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%; }
.simple-transform {
-moz-transform: scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
-ms-transform: scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
-webkit-transform: scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
transform: scale(25px, 25px) rotateZ(25deg) translate(10px, 10px) skew(30deg, 30deg);
-moz-transform-origin: 10% 10%;
-ms-transform-origin: 10% 10%;
-webkit-transform-origin: 10% 10%;
transform-origin: 10% 10%; }
|
