Recommendation
More Effects...
JS
1
 
 
CSS
1
html, body, div, span, applet, object, iframe,
2
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3
a, abbr, acronym, address, big, cite, code,
4
del, dfn, em, img, ins, kbd, q, s, samp,
5
small, strike, strong, sub, sup, tt, var,
6
b, u, i, center,
7
dl, dt, dd, ol, ul, li,
8
fieldset, form, label, legend,
9
table, caption, tbody, tfoot, thead, tr, th, td,
10
article, aside, canvas, details, embed,
11
figure, figcaption, footer, header, hgroup,
12
menu, nav, output, ruby, section, summary,
13
time, mark, audio, video {
14
  margin: 0;
15
  padding: 0;
16
  border: 0;
17
  font: inherit;
18
  font-size: 100%;
19
  vertical-align: baseline; }
20
 
21
html {
22
  line-height: 1; }
23
 
24
ol, ul {
25
  list-style: none; }
26
 
27
table {
28
  border-collapse: collapse;
29
  border-spacing: 0; }
30
 
31
caption, th, td {
32
  text-align: left;
33
  font-weight: normal;
34
  vertical-align: middle; }
35
 
36
q, blockquote {
37
  quotes: none; }
38
  q:before, q:after, blockquote:before, blockquote:after {
39
    content: "";
40
    content: none; }
41
 
42
a img {
43
  border: none; }
44
 
45
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
46
  display: block; }
47
 
48
body {
49
  background-color: #eee9e6;
50
  font-size: 34px; }
51
 
52
.stage {
53
  width: 100%;
54
  height: 700px;
55
  position: relative;
56
  overflow: hidden;
57
  -webkit-perspective: 1600px;
58
  -moz-perspective: 1600px;
59
  -ms-perspective: 1600px;
60
  -o-perspective: 1600px;
61
  perspective: 1600px;
62
  -webkit-perspective-origin: 50% 100px;
63
  -moz-perspective-origin: 50% 100px;
64
  -ms-perspective-origin: 50% 100px;
65
  -o-perspective-origin: 50% 100px;
66
  perspective-origin: 50% 100px;
67
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #131c2d), color-stop(40%, #131c2d), color-stop(40%, #b1b5b8), color-stop(100%, #eee9e6));
68
  background: -webkit-linear-gradient(top, #131c2d, #131c2d 40%, #b1b5b8 40%, #eee9e6);
69
  background: -moz-linear-gradient(top, #131c2d, #131c2d 40%, #b1b5b8 40%, #eee9e6);
70
  background: -o-linear-gradient(top, #131c2d, #131c2d 40%, #b1b5b8 40%, #eee9e6);
71
  background: linear-gradient(top, #131c2d, #131c2d 40%, #b1b5b8 40%, #eee9e6); }
72
 
73
.positioning {
74
  position: absolute;
75
  width: 9em;
76
  top: 3em;
77
  left: 50%;
78
  margin-left: -4.5em;
79
  -webkit-transform-style: preserve-3d;
80
  -moz-transform-style: preserve-3d;
81
  -ms-transform-style: preserve-3d;
82
  -o-transform-style: preserve-3d;
83
  transform-style: preserve-3d; }
84
  .positioning.animated {
85
    -webkit-animation: back-and-forth 14s ease-in-out infinite;
86
    -moz-animation: back-and-forth 14s ease-in-out infinite;
87
    -o-animation: back-and-forth 14s ease-in-out infinite;
88
    -ms-animation: back-and-forth 14s ease-in-out infinite;
89
    animation: back-and-forth 14s ease-in-out infinite; }
90
  .positioning.two {
91
    -webkit-transform: translateX(14em) translateZ(-10em) rotateY(20deg);
92
    -moz-transform: translateX(14em) translateZ(-10em) rotateY(20deg);
93
    -ms-transform: translateX(14em) translateZ(-10em) rotateY(20deg);
94
    -o-transform: translateX(14em) translateZ(-10em) rotateY(20deg);
95
    transform: translateX(14em) translateZ(-10em) rotateY(20deg); }
96
  .positioning.three {
97
    -webkit-transform: translateX(-14em) translateZ(-10em) rotateY(-20deg);
98
    -moz-transform: translateX(-14em) translateZ(-10em) rotateY(-20deg);
99
    -ms-transform: translateX(-14em) translateZ(-10em) rotateY(-20deg);
100
    -o-transform: translateX(-14em) translateZ(-10em) rotateY(-20deg);
101
    transform: translateX(-14em) translateZ(-10em) rotateY(-20deg); }
102
 
103
/* 13.6 x 9.6 x 10.9 */
104
.mac {
105
  width: 12em;
106
  height: 10em;
107
  margin: 0 auto;
108
  -webkit-transform-style: preserve-3d;
109
  -moz-transform-style: preserve-3d;
110
  -ms-transform-style: preserve-3d;
111
  -o-transform-style: preserve-3d;
112
  transform-style: preserve-3d; }
113
  .mac figure, .mac span {
114
    display: block;
115
    position: absolute;
116
    -webkit-backface-visibility: hidden;
117
    -moz-backface-visibility: hidden;
118
    -ms-backface-visibility: hidden;
119
    -o-backface-visibility: hidden;
120
    backface-visibility: hidden;
121
    opacity: 1; }
122
  .mac .front {
123
    height: 11.5em;
124
    width: 9.6em;
125
    background: #e0e0e0;
126
    -webkit-transform: rotateX(5deg) translateZ(5.43em);
127
    -moz-transform: rotateX(5deg) translateZ(5.43em);
128
    -ms-transform: rotateX(5deg) translateZ(5.43em);
129
    -o-transform: rotateX(5deg) translateZ(5.43em);
130
    transform: rotateX(5deg) translateZ(5.43em); }
131
    .mac .front .bezel-top {
132
      border-top: 0.75em solid #f2f2f2;
133
      border-right: 0.5em solid transparent;
134
      border-left: 0.5em solid transparent;
135
      width: 8.6em; }
136
    .mac .front .bezel-left {
137
      border-top: 0.5em solid #d9d9d9;
138
      border-right: 0.75em solid transparent;
139
      border-left: 0.75em solid transparent;
140
      width: 10em;
141
      -webkit-transform: rotateZ(-90deg) translateX(-5.5em) translateY(-5.5em);
142
      -moz-transform: rotateZ(-90deg) translateX(-5.5em) translateY(-5.5em);
143
      -ms-transform: rotateZ(-90deg) translateX(-5.5em) translateY(-5.5em);
144
      -o-transform: rotateZ(-90deg) translateX(-5.5em) translateY(-5.5em);
145
      transform: rotateZ(-90deg) translateX(-5.5em) translateY(-5.5em); }
146
    .mac .front .bezel-right {
147
      border-top: 0.5em solid #d4d4d4;
148
      border-right: 0.75em solid transparent;
149
      border-left: 0.75em solid transparent;
150
      width: 10em;
151
      -webkit-transform: rotateZ(90deg) translateX(5.5em) translateY(-3.62em);
152
      -moz-transform: rotateZ(90deg) translateX(5.5em) translateY(-3.62em);
153
      -ms-transform: rotateZ(90deg) translateX(5.5em) translateY(-3.62em);
154
      -o-transform: rotateZ(90deg) translateX(5.5em) translateY(-3.62em);
155
      transform: rotateZ(90deg) translateX(5.5em) translateY(-3.62em); }
156
    .mac .front .bezel-bottom {
157
      border-top: 0.75em solid #cccccc;
158
      border-right: 0.5em solid transparent;
159
      border-left: 0.5em solid transparent;
160
      width: 8.65em;
161
      -webkit-transform: rotateZ(180deg) translateY(-10.76em);
162
      -moz-transform: rotateZ(180deg) translateY(-10.76em);
163
      -ms-transform: rotateZ(180deg) translateY(-10.76em);
164
      -o-transform: rotateZ(180deg) translateY(-10.76em);
165
      transform: rotateZ(180deg) translateY(-10.76em); }
166
    .mac .front .screen-container {
167
      width: 6.25em;
168
      height: 4.8em;
169
      background: #c2c2c2;
170
      background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b3b3b3), color-stop(4%, #cccccc), color-stop(96%, #cccccc), color-stop(100%, #a6a6a6));
171
      background: -webkit-linear-gradient(top, #b3b3b3, #cccccc 4%, #cccccc 96%, #a6a6a6);
172
      background: -moz-linear-gradient(top, #b3b3b3, #cccccc 4%, #cccccc 96%, #a6a6a6);
173
      background: -o-linear-gradient(top, #b3b3b3, #cccccc 4%, #cccccc 96%, #a6a6a6);
174
      background: linear-gradient(top, #b3b3b3, #cccccc 4%, #cccccc 96%, #a6a6a6);
175
      border-radius: 0.1em;
176
      padding: 0.5em;
177
      -webkit-transform: translate3d(1.15em, 1.5em, 0);
178
      -moz-transform: translate3d(1.15em, 1.5em, 0);
179
      -ms-transform: translate3d(1.15em, 1.5em, 0);
180
      -o-transform: translate3d(1.15em, 1.5em, 0);
181
      transform: translate3d(1.15em, 1.5em, 0); }
182
      .mac .front .screen-container .screen {
183
        display: block;
184
        position: absolute;
185
        left: 0.25em;
186
        top: 0.25em;
187
        background: #657374;
188
        border: 0.25em solid #657374;
189
        width: 6.25em;
190
        height: 4.75em;
191
        border-radius: 0.25em;
192
        overflow: hidden; }
193
        .mac .front .screen-container .screen img {
194
          width: 100%;
195
          height: 100%;
196
          border-radius: 0.1em; }
197
      .mac .front .screen-container .sheen {
198
        display: block;
199
        position: absolute;
200
        top: 0;
201
        background: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, rgba(255, 255, 255, 0.03)), color-stop(50%, rgba(255, 255, 255, 0.06)), color-stop(50%, transparent), color-stop(100%, transparent));
202
        background: -webkit-linear-gradient(top right, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.06) 50%, transparent 50%, transparent);
203
        background: -moz-linear-gradient(top right, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.06) 50%, transparent 50%, transparent);
204
        background: -o-linear-gradient(top right, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.06) 50%, transparent 50%, transparent);
205
        background: linear-gradient(top right, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.06) 50%, transparent 50%, transparent);
206
        width: 100%;
207
        height: 100%; }
208
  .mac .back {
209
    height: 11.5em;
210
    width: 9.6em;
211
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2f2f2), color-stop(0.25em, #e6e6e6), color-stop(100%, #c2c2c2));
212
    background: -webkit-linear-gradient(top, #f2f2f2, #e6e6e6 0.25em, #c2c2c2);
213
    background: -moz-linear-gradient(top, #f2f2f2, #e6e6e6 0.25em, #c2c2c2);
214
    background: -o-linear-gradient(top, #f2f2f2, #e6e6e6 0.25em, #c2c2c2);
215
    background: linear-gradient(top, #f2f2f2, #e6e6e6 0.25em, #c2c2c2);
216
    -webkit-transform: rotateX(5deg) translateZ(-5.45em) rotateY(180deg);
217
    -moz-transform: rotateX(5deg) translateZ(-5.45em) rotateY(180deg);
218
    -ms-transform: rotateX(5deg) translateZ(-5.45em) rotateY(180deg);
219
    -o-transform: rotateX(5deg) translateZ(-5.45em) rotateY(180deg);
220
    transform: rotateX(5deg) translateZ(-5.45em) rotateY(180deg); }
221
  .mac .top {
222
    height: 10.95em;
223
    width: 9.6em;
224
    background-color: #ebf0dc;
225
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fafafa), color-stop(0.25em, #d9d9d9), color-stop(9.35em, #d9d9d9), color-stop(100%, #fafafa));
226
    background: -webkit-linear-gradient(left, #fafafa, #d9d9d9 0.25em, #d9d9d9 9.35em, #fafafa);
227
    background: -moz-linear-gradient(left, #fafafa, #d9d9d9 0.25em, #d9d9d9 9.35em, #fafafa);
228
    background: -o-linear-gradient(left, #fafafa, #d9d9d9 0.25em, #d9d9d9 9.35em, #fafafa);
229
    background: linear-gradient(left, #fafafa, #d9d9d9 0.25em, #d9d9d9 9.35em, #fafafa);
230
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f2f2f2), color-stop(0.25em, #d9d9d9), color-stop(100%, #b3b3b3));
231
    background: -webkit-linear-gradient(top, #f2f2f2, #d9d9d9 0.25em, #b3b3b3);
232
    background: -moz-linear-gradient(top, #f2f2f2, #d9d9d9 0.25em, #b3b3b3);
233
    background: -o-linear-gradient(top, #f2f2f2, #d9d9d9 0.25em, #b3b3b3);
234
    background: linear-gradient(top, #f2f2f2, #d9d9d9 0.25em, #b3b3b3);
235
    -webkit-transform: rotateX(5deg) rotateX(90deg) translateZ(5.45em);
236
    -moz-transform: rotateX(5deg) rotateX(90deg) translateZ(5.45em);
237
    -ms-transform: rotateX(5deg) rotateX(90deg) translateZ(5.45em);
238
    -o-transform: rotateX(5deg) rotateX(90deg) translateZ(5.45em);
239
    transform: rotateX(5deg) rotateX(90deg) translateZ(5.45em); }
240
  .mac .left {
241
    height: 11.5em;
242
    width: 10.9em;
243
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(0.25em, #e0e0e0), color-stop(100%, #b3b3b3));
244
    background: -webkit-linear-gradient(top, #ffffff, #e0e0e0 0.25em, #b3b3b3);
245
    background: -moz-linear-gradient(top, #ffffff, #e0e0e0 0.25em, #b3b3b3);
246
    background: -o-linear-gradient(top, #ffffff, #e0e0e0 0.25em, #b3b3b3);
247
    background: linear-gradient(top, #ffffff, #e0e0e0 0.25em, #b3b3b3);
248
    -webkit-transform: rotateX(5deg) rotateY(-90deg) translateZ(5.45em);
249
    -moz-transform: rotateX(5deg) rotateY(-90deg) translateZ(5.45em);
250
    -ms-transform: rotateX(5deg) rotateY(-90deg) translateZ(5.45em);
251
    -o-transform: rotateX(5deg) rotateY(-90deg) translateZ(5.45em);
252
    transform: rotateX(5deg) rotateY(-90deg) translateZ(5.45em); }
253
    .mac .left:after {
254
      content: "";
255
      position: absolute;
256
      width: 8.9em;
257
      height: 1em;
258
      top: 11.4em;
259
      left: 0.5em;
260
      -webkit-transform: rotateZ(5deg);
261
      -moz-transform: rotateZ(5deg);
262
      -ms-transform: rotateZ(5deg);
263
      -o-transform: rotateZ(5deg);
264
      transform: rotateZ(5deg);
265
      background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(100, 100, 100, 0.8)), color-stop(30%, rgba(100, 100, 100, 0.8)), color-stop(30%, transparent), color-stop(100%, transparent));
266
      background: -webkit-linear-gradient(top, rgba(100, 100, 100, 0.8), rgba(100, 100, 100, 0.8) 30%, transparent 30%, transparent);
267
      background: -moz-linear-gradient(top, rgba(100, 100, 100, 0.8), rgba(100, 100, 100, 0.8) 30%, transparent 30%, transparent);
268
      background: -o-linear-gradient(top, rgba(100, 100, 100, 0.8), rgba(100, 100, 100, 0.8) 30%, transparent 30%, transparent);
269
      background: linear-gradient(top, rgba(100, 100, 100, 0.8), rgba(100, 100, 100, 0.8) 30%, transparent 30%, transparent);
270
      background-size: 2em; }
271
  .mac .right {
272
    height: 11.5em;
273
    width: 10.9em;
274
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(0.25em, #e0e0e0), color-stop(100%, #b3b3b3));
275
    background: -webkit-linear-gradient(top, #ffffff, #e0e0e0 0.25em, #b3b3b3);
276
    background: -moz-linear-gradient(top, #ffffff, #e0e0e0 0.25em, #b3b3b3);
277
    background: -o-linear-gradient(top, #ffffff, #e0e0e0 0.25em, #b3b3b3);
278
    background: linear-gradient(top, #ffffff, #e0e0e0 0.25em, #b3b3b3);
279
    -webkit-transform: rotateX(5deg) rotateY(90deg) translateZ(4.14em);
280
    -moz-transform: rotateX(5deg) rotateY(90deg) translateZ(4.14em);
281
    -ms-transform: rotateX(5deg) rotateY(90deg) translateZ(4.14em);
282
    -o-transform: rotateX(5deg) rotateY(90deg) translateZ(4.14em);
283
    transform: rotateX(5deg) rotateY(90deg) translateZ(4.14em); }
284
    .mac .right:after {
285
      content: "";
286
      position: absolute;
287
      width: 8.9em;
288
      height: 1em;
289
      top: 11.4em;
290
      right: 0.5em;
291
      -webkit-transform: rotateZ(-5deg);
292
      -moz-transform: rotateZ(-5deg);
293
      -ms-transform: rotateZ(-5deg);
294
      -o-transform: rotateZ(-5deg);
295
      transform: rotateZ(-5deg);
296
      background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(100, 100, 100, 0.8)), color-stop(30%, rgba(100, 100, 100, 0.8)), color-stop(30%, transparent), color-stop(100%, transparent));
297
      background: -webkit-linear-gradient(top, rgba(100, 100, 100, 0.8), rgba(100, 100, 100, 0.8) 30%, transparent 30%, transparent);
298
      background: -moz-linear-gradient(top, rgba(100, 100, 100, 0.8), rgba(100, 100, 100, 0.8) 30%, transparent 30%, transparent);
299
      background: -o-linear-gradient(top, rgba(100, 100, 100, 0.8), rgba(100, 100, 100, 0.8) 30%, transparent 30%, transparent);
300
      background: linear-gradient(top, rgba(100, 100, 100, 0.8), rgba(100, 100, 100, 0.8) 30%, transparent 30%, transparent);
301
      background-size: 2em; }
302
  .mac .base-front {
303
    height: 2.1em;
304
    width: 9.6em;
305
    background: #c2c2c2;
306
    -webkit-transform: translateY(10.7em) translateZ(5em);
307
    -moz-transform: translateY(10.7em) translateZ(5em);
308
    -ms-transform: translateY(10.7em) translateZ(5em);
309
    -o-transform: translateY(10.7em) translateZ(5em);
310
    transform: translateY(10.7em) translateZ(5em); }
311
    .mac .base-front:after {
312
      content: "";
313
      display: block;
314
      width: 0.4em;
315
      height: 0.5em;
316
      position: absolute;
317
      top: 0.9em;
318
      right: 1em;
319
      background: #555555;
320
      border-top: 0.1em solid #b3b3b3;
321
      border-right: 0.2em solid #cccccc;
322
      border-bottom: 0.1em solid #e6e6e6;
323
      border-left: 0.2em solid #cccccc;
324
      border-radius: 0.12em; }
325
  .mac .base-back {
326
    height: 2.1em;
327
    width: 9.6em;
328
    background: #b3b3b3;
329
    -webkit-transform: translateY(10.7em) translateZ(-5em) rotateY(180deg);
330
    -moz-transform: translateY(10.7em) translateZ(-5em) rotateY(180deg);
331
    -ms-transform: translateY(10.7em) translateZ(-5em) rotateY(180deg);
332
    -o-transform: translateY(10.7em) translateZ(-5em) rotateY(180deg);
333
    transform: translateY(10.7em) translateZ(-5em) rotateY(180deg); }
334
  .mac .base-left {
335
    height: 2.1em;
336
    width: 10em;
337
    background: #b3b3b3;
338
    -webkit-transform: translateY(10.7em) rotateY(-90deg) translateZ(4.99em);
339
    -moz-transform: translateY(10.7em) rotateY(-90deg) translateZ(4.99em);
340
    -ms-transform: translateY(10.7em) rotateY(-90deg) translateZ(4.99em);
341
    -o-transform: translateY(10.7em) rotateY(-90deg) translateZ(4.99em);
342
    transform: translateY(10.7em) rotateY(-90deg) translateZ(4.99em); }
343
  .mac .base-right {
344
    height: 2.1em;
345
    width: 10em;
346
    background: #b3b3b3;
347
    -webkit-transform: translateY(10.7em) rotateY(90deg) translateZ(4.58em);
348
    -moz-transform: translateY(10.7em) rotateY(90deg) translateZ(4.58em);
349
    -ms-transform: translateY(10.7em) rotateY(90deg) translateZ(4.58em);
350
    -o-transform: translateY(10.7em) rotateY(90deg) translateZ(4.58em);
351
    transform: translateY(10.7em) rotateY(90deg) translateZ(4.58em); }
352
  .mac .logo {
353
    -webkit-transform: translateY(8.75em) translateX(1.25em);
354
    -moz-transform: translateY(8.75em) translateX(1.25em);
355
    -ms-transform: translateY(8.75em) translateX(1.25em);
356
    -o-transform: translateY(8.75em) translateX(1.25em);
357
    transform: translateY(8.75em) translateX(1.25em); }
358
    .mac .logo span.image {
359
      display: block;
360
      position: absolute;
361
      width: 15px;
362
      height: 18px;
363
      left: 0;
364
      background: url(http://hop.ie/mac/images/bg/apple.png) no-repeat bottom;
365
      background-size: 100%; }
366
    .mac .logo span.text {
367
      display: block;
368
      position: absolute;
369
      left: 2.5em;
370
      top: 0.6em;
371
      width: 10em;
372
      font-family: apple_garamondregular, "Garamond", "Times New Roman", Times, serif;
373
      font-size: 0.333em;
374
      color: #555555;
375
      line-height: 0.8em; }
376
  .mac .floppy {
377
    height: 0.2em;
378
    width: 2.8em;
379
    -webkit-transform: translate3d(4.8em, 8.9em, 0);
380
    -moz-transform: translate3d(4.8em, 8.9em, 0);
381
    -ms-transform: translate3d(4.8em, 8.9em, 0);
382
    -o-transform: translate3d(4.8em, 8.9em, 0);
383
    transform: translate3d(4.8em, 8.9em, 0);
384
    background: #555555;
385
    border-top: 0.1em solid #cccccc;
386
    border-right: 0.3em solid #e6e6e6;
387
    border-bottom: 0.1em solid #f2f2f2;
388
    border-left: 0.3em solid #e6e6e6;
389
    border-radius: 0.25em; }
390
  .mac .shadow {
391
    width: 10em;
392
    height: 11em;
393
    background: transparent;
394
    -webkit-transform: rotateX(90deg) translateZ(-7.4em) translateX(20em);
395
    -moz-transform: rotateX(90deg) translateZ(-7.4em) translateX(20em);
396
    -ms-transform: rotateX(90deg) translateZ(-7.4em) translateX(20em);
397
    -o-transform: rotateX(90deg) translateZ(-7.4em) translateX(20em);
398
    transform: rotateX(90deg) translateZ(-7.4em) translateX(20em);
399
    -webkit-box-shadow: -20.2em 0 1.8em rgba(100, 90, 100, 0.4);
400
    -moz-box-shadow: -20.2em 0 1.8em rgba(100, 90, 100, 0.4);
401
    box-shadow: -20.2em 0 1.8em rgba(100, 90, 100, 0.4); }
402
 
403
@-moz-keyframes back-and-forth {
404
  0% {
405
    -moz-transform: rotateY(40deg);
406
    transform: rotateY(40deg); }
407
 
408
  40%, 50% {
409
    -moz-transform: rotateY(-40deg);
410
    transform: rotateY(-40deg); }
411
 
412
  90%, 100% {
413
    -moz-transform: rotateY(40deg);
414
    transform: rotateY(40deg); } }
415
 
416
@-webkit-keyframes back-and-forth {
417
  0% {
418
    -webkit-transform: rotateY(40deg);
419
    transform: rotateY(40deg); }
420
 
421
  40%, 50% {
422
    -webkit-transform: rotateY(-40deg);
423
    transform: rotateY(-40deg); }
424
 
425
  90%, 100% {
426
    -webkit-transform: rotateY(40deg);
427
    transform: rotateY(40deg); } }
428
 
429
@-o-keyframes back-and-forth {
430
  0% {
431
    -o-transform: rotateY(40deg);
432
    transform: rotateY(40deg); }
433
 
434
  40%, 50% {
435
    -o-transform: rotateY(-40deg);
436
    transform: rotateY(-40deg); }
437
 
438
  90%, 100% {
439
    -o-transform: rotateY(40deg);
440
    transform: rotateY(40deg); } }
441
 
442
@-ms-keyframes back-and-forth {
443
  0% {
444
    -ms-transform: rotateY(40deg);
445
    transform: rotateY(40deg); }
446
 
447
  40%, 50% {
448
    -ms-transform: rotateY(-40deg);
449
    transform: rotateY(-40deg); }
450
 
451
  90%, 100% {
452
    -ms-transform: rotateY(40deg);
453
    transform: rotateY(40deg); } }
454
 
455
@keyframes back-and-forth {
456
  0% {
457
    -webkit-transform: rotateY(40deg);
458
    -moz-transform: rotateY(40deg);
459
    -ms-transform: rotateY(40deg);
460
    -o-transform: rotateY(40deg);
461
    transform: rotateY(40deg); }
462
 
463
  40%, 50% {
464
    -webkit-transform: rotateY(-40deg);
465
    -moz-transform: rotateY(-40deg);
466
    -ms-transform: rotateY(-40deg);
467
    -o-transform: rotateY(-40deg);
468
    transform: rotateY(-40deg); }
469
 
470
  90%, 100% {
471
    -webkit-transform: rotateY(40deg);
472
    -moz-transform: rotateY(40deg);
473
    -ms-transform: rotateY(40deg);
474
    -o-transform: rotateY(40deg);
475
    transform: rotateY(40deg); } }
476
 
477
@font-face {
478
  font-family: "apple_garamondregular";
479
  src: url("http://hop.ie/mac/fonts/apple_garamond-webfont.eot");
480
  src: url("http://hop.ie/mac/fonts/apple_garamond-webfont.eot?#iefix") format("embedded-opentype"), url("http://hop.ie/mac/fonts/apple_garamond-webfont.woff") format("woff"), url("http://hop.ie/mac/fonts/apple_garamond-webfont.ttf") format("truetype"), url("http://hop.ie/mac/fonts/apple_garamond-webfont.svg#apple_garamondregular") format("svg");
481
  font-weight: normal;
482
  font-style: normal; }
 
HTML
1
    <div class="stage">
2
      <div class="positioning animated">
3
        <div class="mac">
4
          <figure class="back"></figure>
5
          <figure class="left"></figure>
6
          <figure class="right"></figure>
7
          <figure class="top"></figure>
8
          <figure class="base-front">
9
            <span class="keyboard-port"></span>
10
          </figure>
11
          <figure class="base-left"></figure>
12
          <figure class="base-right"></figure>
13
          <figure class="base-back"></figure>
14
          <figure class="front">
15
            <span class="bezel-top"></span>
16
            <span class="bezel-left"></span>
17
            <span class="bezel-right"></span>
18
            <span class="bezel-bottom"></span>
19
            <figure class="screen-container">
20
              <span class="screen">
21
                <img src="http://hop.ie/mac/images/bg/smiley.png">
22
                <span class="sheen"></span>
23
              </span>
24
            </figure>
25
            <figure class="logo">
26
              <span class="image"></span>
27
              <span class="text">Macintosh Plus</span>
28
            </figure>
29
            <figure class="floppy"></figure>
30
          </figure>
31
          <figure class="shadow"></figure>
32
        </div>
33
      </div>
34
    </div>
 

Join Effecthub.com

Working with Global Gaming Artists and Developers!


Or Sign Up with Your Email Address:
This field must contain a valid email
Password should be at least 1 character