记录几个好看的模态弹窗

  1  var overlay = document.querySelector( '.md-overlay' );
  2 
  3     [].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {
  4 
  5         var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
  6                 close = modal.querySelector( '.md-close' );
  7 
  8         function removeModal( hasPerspective ) {
  9             classie.remove( modal, 'md-show' );
 10 
 11             if( hasPerspective ) {
 12                 classie.remove( document.documentElement, 'md-perspective' );
 13             }
 14         }
 15 
 16         function removeModalHandler() {
 17             removeModal( classie.has( el, 'md-setperspective' ) );
 18         }
 19 
 20         el.addEventListener( 'click', function( ev ) {
 21             classie.add( modal, 'md-show' );
 22             overlay.removeEventListener( 'click', removeModalHandler );
 23             overlay.addEventListener( 'click', removeModalHandler );
 24 
 25             if( classie.has( el, 'md-setperspective' ) ) {
 26                 setTimeout( function() {
 27                     classie.add( document.documentElement, 'md-perspective' );
 28                 }, 25 );
 29             }
 30         });
 31 
 32         close.addEventListener( 'click', function( ev ) {
 33             ev.stopPropagation();
 34             removeModalHandler();
 35         });
 36 
 37     } );
 38 
 39 
 40 
 41 
 42     function classReg( className ) {
 43         return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
 44     }
 45 
 46     // classList support for class management
 47     // altho to be fair, the api sucks because it won't accept multiple classes at once
 48     var hasClass, addClass, removeClass;
 49 
 50     if ( 'classList' in document.documentElement ) {
 51         hasClass = function( elem, c ) {
 52             return elem.classList.contains( c );
 53         };
 54         addClass = function( elem, c ) {
 55             elem.classList.add( c );
 56         };
 57         removeClass = function( elem, c ) {
 58             elem.classList.remove( c );
 59         };
 60     }
 61     else {
 62         hasClass = function( elem, c ) {
 63             return classReg( c ).test( elem.className );
 64         };
 65         addClass = function( elem, c ) {
 66             if ( !hasClass( elem, c ) ) {
 67                 elem.className = elem.className + ' ' + c;
 68             }
 69         };
 70         removeClass = function( elem, c ) {
 71             elem.className = elem.className.replace( classReg( c ), ' ' );
 72         };
 73     }
 74 
 75     function toggleClass( elem, c ) {
 76         var fn = hasClass( elem, c ) ? removeClass : addClass;
 77         fn( elem, c );
 78     }
 79 
 80     var classie = {
 81         // full names
 82         hasClass: hasClass,
 83         addClass: addClass,
 84         removeClass: removeClass,
 85         toggleClass: toggleClass,
 86         // short names
 87         has: hasClass,
 88         add: addClass,
 89         remove: removeClass,
 90         toggle: toggleClass
 91     };
 92 
 93     // transport
 94     if ( typeof define === 'function' && define.amd ) {
 95         // AMD
 96         define( classie );
 97     } else {
 98         // browser global
 99         window.classie = classie;
100     }

 1 <button class="md-trigger" data-modal="modal-1">Fade in &amp; Scale</button><--按钮部分-->
 2 
 3 <div class="md-modal md-effect-1" id="modal-1"><--显示弹窗部分-->
 4     <div class="md-content">
 5         <h3>Modal Dialog</h3>
 6         <div>
 7             <p>This is a modal window. You can do the following things with it:</p>
 8             <ul>
 9                 <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
10                 <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
11                 <li><strong>Close:</strong> click on the button below to close the modal.</li>
12             </ul>
13             <button class="md-close">Close me!</button>
14         </div>
15     </div>
16 </div>

 1 .md-modal {
 2     position: fixed;
 3     top: 50%;
 4     left: 50%;
 5     width: 50%;
 6     max-width: 630px;
 7     min-width: 320px;
 8     height: auto;
 9     z-index: 2000;
10     visibility: hidden;
11     -webkit-backface-visibility: hidden;
12     -moz-backface-visibility: hidden;
13     backface-visibility: hidden;
14     -webkit-transform: translateX(-50%) translateY(-50%);
15     -moz-transform: translateX(-50%) translateY(-50%);
16     -ms-transform: translateX(-50%) translateY(-50%);
17     transform: translateX(-50%) translateY(-50%);
18 }
19 
20 .md-show {
21     visibility: visible;
22 }
23 
24 .md-overlay {
25     position: fixed;
26     width: 100%;
27     height: 100%;
28     visibility: hidden;
29     top: 0;
30     left: 0;
31     z-index: 1000;
32     opacity: 0;
33     background: rgba(143,27,15,0.8);
34     -webkit-transition: all 0.3s;
35     -moz-transition: all 0.3s;
36     transition: all 0.3s;
37 }
38 
39 .md-show .md-overlay {
40     opacity: 1;
41     visibility: visible;
42 }
43 
44 /* Content styles */
45 .md-content {
46     color: #fff;
47     background: #e74c3c;
48     position: relative;
49     border-radius: 3px;
50     margin: 0 auto;
51 }
52 
53 .md-content h3 {
54     margin: 0;
55     padding: 0.4em;
56     text-align: center;
57     font-size: 2.4em;
58     font-weight: 300;
59     opacity: 0.8;
60     background: rgba(0,0,0,0.1);
61     border-radius: 3px 3px 0 0;
62 }
63 
64 .md-content > div {
65     padding: 15px 40px 30px;
66     margin: 0;
67     font-weight: 300;
68     font-size: 1.15em;
69 }
70 
71 .md-content > div p {
72     margin: 0;
73     padding: 10px 0;
74 }
75 
76 .md-content > div ul {
77     margin: 0;
78     padding: 0 0 30px 20px;
79 }
80 
81 .md-content > div ul li {
82     padding: 5px 0;
83 }
84 
85 .md-content button {
86     display: block;
87     margin: 0 auto;
88     font-size: 0.8em;
89 }

 1 .md-effect-1 .md-content {
 2     -webkit-transform: scale(0.5);
 3     -moz-transform: scale(0.5);
 4     -ms-transform: scale(0.5);
 5     transform: scale(0.5);
 6     opacity: 0;
 7     -webkit-transition: all 0.3s;
 8     -moz-transition: all 0.3s;
 9     transition: all 0.3s;
10 }
11 
12 .md-show.md-effect-1 .md-content {
13     -webkit-transform: scale(1);
14     -moz-transform: scale(1);
15     -ms-transform: scale(1);
16     transform: scale(1);
17     opacity: 1;
18 }

  1 /* General styles for the modal */
  2 
  3 /* 
  4 Styles for the html/body for special modal where we want 3d effects
  5 Note that we need a container wrapping all content on the page for the 
  6 perspective effects (not including the modals and the overlay).
  7 */
  8 .md-perspective,
  9 .md-perspective body {
 10     height: 100%;
 11     overflow: hidden;
 12 }
 13 
 14 .md-perspective body  {
 15     background: #222;
 16     -webkit-perspective: 600px;
 17     -moz-perspective: 600px;
 18     perspective: 600px;
 19 }
 20 
 21 .container {
 22     background: #e74c3c;
 23     min-height: 100%;
 24 }
 25 
 26 .md-modal {
 27     position: fixed;
 28     top: 50%;
 29     left: 50%;
 30     width: 50%;
 31     max-width: 630px;
 32     min-width: 320px;
 33     height: auto;
 34     z-index: 2000;
 35     visibility: hidden;
 36     -webkit-backface-visibility: hidden;
 37     -moz-backface-visibility: hidden;
 38     backface-visibility: hidden;
 39     -webkit-transform: translateX(-50%) translateY(-50%);
 40     -moz-transform: translateX(-50%) translateY(-50%);
 41     -ms-transform: translateX(-50%) translateY(-50%);
 42     transform: translateX(-50%) translateY(-50%);
 43 }
 44 
 45 .md-show {
 46     visibility: visible;
 47 }
 48 
 49 .md-overlay {
 50     position: fixed;
 51     width: 100%;
 52     height: 100%;
 53     visibility: hidden;
 54     top: 0;
 55     left: 0;
 56     z-index: 1000;
 57     opacity: 0;
 58     background: rgba(143,27,15,0.8);
 59     -webkit-transition: all 0.3s;
 60     -moz-transition: all 0.3s;
 61     transition: all 0.3s;
 62 }
 63 
 64 .md-show ~ .md-overlay {
 65     opacity: 1;
 66     visibility: visible;
 67 }
 68 
 69 /* Content styles */
 70 .md-content {
 71     color: #fff;
 72     background: #e74c3c;
 73     position: relative;
 74     border-radius: 3px;
 75     margin: 0 auto;
 76 }
 77 
 78 .md-content h3 {
 79     margin: 0;
 80     padding: 0.4em;
 81     text-align: center;
 82     font-size: 2.4em;
 83     font-weight: 300;
 84     opacity: 0.8;
 85     background: rgba(0,0,0,0.1);
 86     border-radius: 3px 3px 0 0;
 87 }
 88 
 89 .md-content > div {
 90     padding: 15px 40px 30px;
 91     margin: 0;
 92     font-weight: 300;
 93     font-size: 1.15em;
 94 }
 95 
 96 .md-content > div p {
 97     margin: 0;
 98     padding: 10px 0;
 99 }
100 
101 .md-content > div ul {
102     margin: 0;
103     padding: 0 0 30px 20px;
104 }
105 
106 .md-content > div ul li {
107     padding: 5px 0;
108 }
109 
110 .md-content button {
111     display: block;
112     margin: 0 auto;
113     font-size: 0.8em;
114 }
115 
116 /* Individual modal styles with animations/transitions */
117 
118 /* Effect 1: Fade in and scale up */
119 .md-effect-1 .md-content {
120     -webkit-transform: scale(0.7);
121     -moz-transform: scale(0.7);
122     -ms-transform: scale(0.7);
123     transform: scale(0.7);
124     opacity: 0;
125     -webkit-transition: all 0.3s;
126     -moz-transition: all 0.3s;
127     transition: all 0.3s;
128 }
129 
130 .md-show.md-effect-1 .md-content {
131     -webkit-transform: scale(1);
132     -moz-transform: scale(1);
133     -ms-transform: scale(1);
134     transform: scale(1);
135     opacity: 1;
136 }
137 
138 /* Effect 2: Slide from the right */
139 .md-effect-2 .md-content {
140     -webkit-transform: translateX(20%);
141     -moz-transform: translateX(20%);
142     -ms-transform: translateX(20%);
143     transform: translateX(20%);
144     opacity: 0;
145     -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
146     -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
147     transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
148 }
149 
150 .md-show.md-effect-2 .md-content {
151     -webkit-transform: translateX(0);
152     -moz-transform: translateX(0);
153     -ms-transform: translateX(0);
154     transform: translateX(0);
155     opacity: 1;
156 }
157 
158 /* Effect 3: Slide from the bottom */
159 .md-effect-3 .md-content {
160     -webkit-transform: translateY(20%);
161     -moz-transform: translateY(20%);
162     -ms-transform: translateY(20%);
163     transform: translateY(20%);
164     opacity: 0;
165     -webkit-transition: all 0.3s;
166     -moz-transition: all 0.3s;
167     transition: all 0.3s;
168 }
169 
170 .md-show.md-effect-3 .md-content {
171     -webkit-transform: translateY(0);
172     -moz-transform: translateY(0);
173     -ms-transform: translateY(0);
174     transform: translateY(0);
175     opacity: 1;
176 }
177 
178 /* Effect 4: Newspaper */
179 .md-effect-4 .md-content {
180     -webkit-transform: scale(0) rotate(720deg);
181     -moz-transform: scale(0) rotate(720deg);
182     -ms-transform: scale(0) rotate(720deg);
183     transform: scale(0) rotate(720deg);
184     opacity: 0;
185 }
186 
187 .md-show.md-effect-4 ~ .md-overlay,
188 .md-effect-4 .md-content {
189     -webkit-transition: all 0.5s;
190     -moz-transition: all 0.5s;
191     transition: all 0.5s;
192 }
193 
194 .md-show.md-effect-4 .md-content {
195     -webkit-transform: scale(1) rotate(0deg);
196     -moz-transform: scale(1) rotate(0deg);
197     -ms-transform: scale(1) rotate(0deg);
198     transform: scale(1) rotate(0deg);
199     opacity: 1;
200 }
201 
202 /* Effect 5: fall */
203 .md-effect-5.md-modal {
204     -webkit-perspective: 1300px;
205     -moz-perspective: 1300px;
206     perspective: 1300px;
207 }
208 
209 .md-effect-5 .md-content {
210     -webkit-transform-style: preserve-3d;
211     -moz-transform-style: preserve-3d;
212     transform-style: preserve-3d;
213     -webkit-transform: translateZ(600px) rotateX(20deg); 
214     -moz-transform: translateZ(600px) rotateX(20deg); 
215     -ms-transform: translateZ(600px) rotateX(20deg); 
216     transform: translateZ(600px) rotateX(20deg); 
217     opacity: 0;
218 }
219 
220 .md-show.md-effect-5 .md-content {
221     -webkit-transition: all 0.3s ease-in;
222     -moz-transition: all 0.3s ease-in;
223     transition: all 0.3s ease-in;
224     -webkit-transform: translateZ(0px) rotateX(0deg);
225     -moz-transform: translateZ(0px) rotateX(0deg);
226     -ms-transform: translateZ(0px) rotateX(0deg);
227     transform: translateZ(0px) rotateX(0deg); 
228     opacity: 1;
229 }
230 
231 /* Effect 6: side fall */
232 .md-effect-6.md-modal {
233     -webkit-perspective: 1300px;
234     -moz-perspective: 1300px;
235     perspective: 1300px;
236 }
237 
238 .md-effect-6 .md-content {
239     -webkit-transform-style: preserve-3d;
240     -moz-transform-style: preserve-3d;
241     transform-style: preserve-3d;
242     -webkit-transform: translate(30%) translateZ(600px) rotate(10deg); 
243     -moz-transform: translate(30%) translateZ(600px) rotate(10deg);
244     -ms-transform: translate(30%) translateZ(600px) rotate(10deg);
245     transform: translate(30%) translateZ(600px) rotate(10deg); 
246     opacity: 0;
247 }
248 
249 .md-show.md-effect-6 .md-content {
250     -webkit-transition: all 0.3s ease-in;
251     -moz-transition: all 0.3s ease-in;
252     transition: all 0.3s ease-in;
253     -webkit-transform: translate(0%) translateZ(0) rotate(0deg);
254     -moz-transform: translate(0%) translateZ(0) rotate(0deg);
255     -ms-transform: translate(0%) translateZ(0) rotate(0deg);
256     transform: translate(0%) translateZ(0) rotate(0deg);
257     opacity: 1;
258 }
259 
260 /* Effect 7:  slide and stick to top */
261 .md-effect-7{
262     top: 0;
263     -webkit-transform: translateX(-50%);
264     -moz-transform: translateX(-50%);
265     -ms-transform: translateX(-50%);
266     transform: translateX(-50%);
267 }
268 
269 .md-effect-7 .md-content {
270     -webkit-transform: translateY(-200%);
271     -moz-transform: translateY(-200%);
272     -ms-transform: translateY(-200%);
273     transform: translateY(-200%);
274     -webkit-transition: all .3s;
275     -moz-transition: all .3s;
276     transition: all .3s;
277     opacity: 0;
278 }
279 
280 .md-show.md-effect-7 .md-content {
281     -webkit-transform: translateY(0%);
282     -moz-transform: translateY(0%);
283     -ms-transform: translateY(0%);
284     transform: translateY(0%);
285     border-radius: 0 0 3px 3px;
286     opacity: 1;
287 }
288 
289 /* Effect 8: 3D flip horizontal */
290 .md-effect-8.md-modal {
291     -webkit-perspective: 1300px;
292     -moz-perspective: 1300px;
293     perspective: 1300px;
294 }
295 
296 .md-effect-8 .md-content {
297     -webkit-transform-style: preserve-3d;
298     -moz-transform-style: preserve-3d;
299     transform-style: preserve-3d;
300     -webkit-transform: rotateY(-70deg);
301     -moz-transform: rotateY(-70deg);
302     -ms-transform: rotateY(-70deg);
303     transform: rotateY(-70deg);
304     -webkit-transition: all 0.3s;
305     -moz-transition: all 0.3s;
306     transition: all 0.3s;
307     opacity: 0;
308 }
309 
310 .md-show.md-effect-8 .md-content {
311     -webkit-transform: rotateY(0deg);
312     -moz-transform: rotateY(0deg);
313     -ms-transform: rotateY(0deg);
314     transform: rotateY(0deg);
315     opacity: 1;
316 }
317 
318 /* Effect 9: 3D flip vertical */
319 .md-effect-9.md-modal {
320     -webkit-perspective: 1300px;
321     -moz-perspective: 1300px;
322     perspective: 1300px;
323 }
324 
325 .md-effect-9 .md-content {
326     -webkit-transform-style: preserve-3d;
327     -moz-transform-style: preserve-3d;
328     transform-style: preserve-3d;
329     -webkit-transform: rotateX(-70deg);
330     -moz-transform: rotateX(-70deg);
331     -ms-transform: rotateX(-70deg);
332     transform: rotateX(-70deg);
333     -webkit-transition: all 0.3s;
334     -moz-transition: all 0.3s;
335     transition: all 0.3s;
336     opacity: 0;
337 }
338 
339 .md-show.md-effect-9 .md-content {
340     -webkit-transform: rotateX(0deg);
341     -moz-transform: rotateX(0deg);
342     -ms-transform: rotateX(0deg);
343     transform: rotateX(0deg);
344     opacity: 1;
345 }
346 
347 /* Effect 10: 3D sign */
348 .md-effect-10.md-modal {
349     -webkit-perspective: 1300px;
350     -moz-perspective: 1300px;
351     perspective: 1300px;
352 }
353 
354 .md-effect-10 .md-content {
355     -webkit-transform-style: preserve-3d;
356     -moz-transform-style: preserve-3d;
357     transform-style: preserve-3d;
358     -webkit-transform: rotateX(-60deg);
359     -moz-transform: rotateX(-60deg);
360     -ms-transform: rotateX(-60deg);
361     transform: rotateX(-60deg);
362     -webkit-transform-origin: 50% 0;
363     -moz-transform-origin: 50% 0;
364     transform-origin: 50% 0;
365     opacity: 0;
366     -webkit-transition: all 0.3s;
367     -moz-transition: all 0.3s;
368     transition: all 0.3s;
369 }
370 
371 .md-show.md-effect-10 .md-content {
372     -webkit-transform: rotateX(0deg);
373     -moz-transform: rotateX(0deg);
374     -ms-transform: rotateX(0deg);
375     transform: rotateX(0deg);
376     opacity: 1;
377 }
378 
379 /* Effect 11: Super scaled */
380 .md-effect-11 .md-content {
381     -webkit-transform: scale(2);
382     -moz-transform: scale(2);
383     -ms-transform: scale(2);
384     transform: scale(2);
385     opacity: 0;
386     -webkit-transition: all 0.3s;
387     -moz-transition: all 0.3s;
388     transition: all 0.3s;
389 }
390 
391 .md-show.md-effect-11 .md-content {
392     -webkit-transform: scale(1);
393     -moz-transform: scale(1);
394     -ms-transform: scale(1);
395     transform: scale(1);
396     opacity: 1;
397 }
398 
399 /* Effect 12:  Just me */
400 .md-effect-12 .md-content {
401     -webkit-transform: scale(0.8);
402     -moz-transform: scale(0.8);
403     -ms-transform: scale(0.8);
404     transform: scale(0.8);
405     opacity: 0;
406     -webkit-transition: all 0.3s;
407     -moz-transition: all 0.3s;
408     transition: all 0.3s;
409 }
410 
411 .md-show.md-effect-12 ~ .md-overlay {
412     background: #e74c3c;
413 } 
414 
415 .md-effect-12 .md-content h3,
416 .md-effect-12 .md-content {
417     background: transparent;
418 }
419 
420 .md-show.md-effect-12 .md-content {
421     -webkit-transform: scale(1);
422     -moz-transform: scale(1);
423     -ms-transform: scale(1);
424     transform: scale(1);
425     opacity: 1;
426 }
427 
428 /* Effect 13: 3D slit */
429 .md-effect-13.md-modal {
430     -webkit-perspective: 1300px;
431     -moz-perspective: 1300px;
432     perspective: 1300px;
433 }
434 
435 .md-effect-13 .md-content {
436     -webkit-transform-style: preserve-3d;
437     -moz-transform-style: preserve-3d;
438     transform-style: preserve-3d;
439     -webkit-transform: translateZ(-3000px) rotateY(90deg);
440     -moz-transform: translateZ(-3000px) rotateY(90deg);
441     -ms-transform: translateZ(-3000px) rotateY(90deg);
442     transform: translateZ(-3000px) rotateY(90deg);
443     opacity: 0;
444 }
445 
446 .md-show.md-effect-13 .md-content {
447     -webkit-animation: slit .7s forwards ease-out;
448     -moz-animation: slit .7s forwards ease-out;
449     animation: slit .7s forwards ease-out;
450 }
451 
452 @-webkit-keyframes slit {
453     50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;}
454     100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; }
455 }
456 
457 @-moz-keyframes slit {
458     50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;}
459     100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; }
460 }
461 
462 @keyframes slit {
463     50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
464     100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
465 }
466 
467 /* Effect 14:  3D Rotate from bottom */
468 .md-effect-14.md-modal {
469     -webkit-perspective: 1300px;
470     -moz-perspective: 1300px;
471     perspective: 1300px;
472 }
473 
474 .md-effect-14 .md-content {
475     -webkit-transform-style: preserve-3d;
476     -moz-transform-style: preserve-3d;
477     transform-style: preserve-3d;
478     -webkit-transform: translateY(100%) rotateX(90deg);
479     -moz-transform: translateY(100%) rotateX(90deg);
480     -ms-transform: translateY(100%) rotateX(90deg);
481     transform: translateY(100%) rotateX(90deg);
482     -webkit-transform-origin: 0 100%;
483     -moz-transform-origin: 0 100%;
484     transform-origin: 0 100%;
485     opacity: 0;
486     -webkit-transition: all 0.3s ease-out;
487     -moz-transition: all 0.3s ease-out;
488     transition: all 0.3s ease-out;
489 }
490 
491 .md-show.md-effect-14 .md-content {
492     -webkit-transform: translateY(0%) rotateX(0deg);
493     -moz-transform: translateY(0%) rotateX(0deg);
494     -ms-transform: translateY(0%) rotateX(0deg);
495     transform: translateY(0%) rotateX(0deg);
496     opacity: 1;
497 }
498 
499 /* Effect 15:  3D Rotate in from left */
500 .md-effect-15.md-modal {
501     -webkit-perspective: 1300px;
502     -moz-perspective: 1300px;
503     perspective: 1300px;
504 }
505 
506 .md-effect-15 .md-content {
507     -webkit-transform-style: preserve-3d;
508     -moz-transform-style: preserve-3d;
509     transform-style: preserve-3d;
510     -webkit-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
511     -moz-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
512     -ms-transform: translateZ(100px) translateX(-30%) rotateY(90deg);
513     transform: translateZ(100px) translateX(-30%) rotateY(90deg);
514     -webkit-transform-origin: 0 100%;
515     -moz-transform-origin: 0 100%;
516     transform-origin: 0 100%;
517     opacity: 0;
518     -webkit-transition: all 0.3s;
519     -moz-transition: all 0.3s;
520     transition: all 0.3s;
521 }
522 
523 .md-show.md-effect-15 .md-content {
524     -webkit-transform: translateZ(0px) translateX(0%) rotateY(0deg);
525     -moz-transform: translateZ(0px) translateX(0%) rotateY(0deg);
526     -ms-transform: translateZ(0px) translateX(0%) rotateY(0deg);
527     transform: translateZ(0px) translateX(0%) rotateY(0deg);
528     opacity: 1;
529 }
530 
531 /* Effect 16:  Blur */
532 .md-show.md-effect-16 ~ .md-overlay {
533     background: rgba(180,46,32,0.5);
534 }
535 
536 .md-show.md-effect-16 ~ .container {
537     -webkit-filter: blur(3px);
538     -moz-filter: blur(3px);
539     filter: blur(3px);
540 }
541 
542 .md-effect-16 .md-content {
543     -webkit-transform: translateY(-5%);
544     -moz-transform: translateY(-5%);
545     -ms-transform: translateY(-5%);
546     transform: translateY(-5%);
547     opacity: 0;
548 }
549 
550 .md-show.md-effect-16 ~ .container,
551 .md-effect-16 .md-content {
552     -webkit-transition: all 0.3s;
553     -moz-transition: all 0.3s;
554     transition: all 0.3s;
555 }
556 
557 .md-show.md-effect-16 .md-content {
558     -webkit-transform: translateY(0);
559     -moz-transform: translateY(0);
560     -ms-transform: translateY(0);
561     transform: translateY(0);
562     opacity: 1;
563 }
564 
565 /* Effect 17:  Slide in from bottom with perspective on container */
566 .md-show.md-effect-17 ~ .container {
567     height: 100%;
568     overflow: hidden;
569     -webkit-transition: -webkit-transform 0.3s;
570     -moz-transition: -moz-transform 0.3s;
571     transition: transform 0.3s;
572 }    
573 
574 .md-show.md-effect-17 ~ .container,
575 .md-show.md-effect-17 ~ .md-overlay  {
576     -webkit-transform: rotateX(-2deg);
577     -moz-transform: rotateX(-2deg);
578     -ms-transform: rotateX(-2deg);
579     transform: rotateX(-2deg);
580     -webkit-transform-origin: 50% 0%;
581     -moz-transform-origin: 50% 0%;
582     transform-origin: 50% 0%;
583     -webkit-transform-style: preserve-3d;
584     -moz-transform-style: preserve-3d;
585     transform-style: preserve-3d;
586 }
587 
588 .md-effect-17 .md-content {
589     opacity: 0;
590     -webkit-transform: translateY(200%);
591     -moz-transform: translateY(200%);
592     -ms-transform: translateY(200%);
593     transform: translateY(200%);
594 }
595 
596 .md-show.md-effect-17 .md-content {
597     -webkit-transform: translateY(0);
598     -moz-transform: translateY(0);
599     -ms-transform: translateY(0);
600     transform: translateY(0);
601     opacity: 1;
602     -webkit-transition: all 0.3s 0.2s;
603     -moz-transition: all 0.3s 0.2s;
604     transition: all 0.3s 0.2s;
605 }
606 
607 /* Effect 18:  Slide from right with perspective on container */
608 .md-show.md-effect-18 ~ .container {
609     height: 100%;
610     overflow: hidden;
611 }
612 
613 .md-show.md-effect-18 ~ .md-overlay {
614     background: rgba(143,27,15,0.8);
615     -webkit-transition: all 0.5s;
616     -moz-transition: all 0.5s;
617     transition: all 0.5s;
618 }
619 
620 .md-show.md-effect-18 ~ .container,
621 .md-show.md-effect-18 ~ .md-overlay {
622     -webkit-transform-style: preserve-3d;
623     -webkit-transform-origin: 0% 50%;
624     -webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;
625     -moz-transform-style: preserve-3d;
626     -moz-transform-origin: 0% 50%;
627     -moz-animation: rotateRightSideFirst 0.5s forwards ease-in;
628     transform-style: preserve-3d;
629     transform-origin: 0% 50%;
630     animation: rotateRightSideFirst 0.5s forwards ease-in;
631 }
632 
633 @-webkit-keyframes rotateRightSideFirst {
634     50% { -webkit-transform: translateZ(-50px) rotateY(5deg); -webkit-animation-timing-function: ease-out; }
635     100% { -webkit-transform: translateZ(-200px); }
636 }
637 
638 @-moz-keyframes rotateRightSideFirst {
639     50% { -moz-transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; }
640     100% { -moz-transform: translateZ(-200px); }
641 }
642 
643 @keyframes rotateRightSideFirst {
644     50% { transform: translateZ(-50px) rotateY(5deg); animation-timing-function: ease-out; }
645     100% { transform: translateZ(-200px); }
646 }
647 
648 .md-effect-18 .md-content {
649     -webkit-transform: translateX(200%);
650     -moz-transform: translateX(200%);
651     -ms-transform: translateX(200%);
652     transform: translateX(200%);
653     opacity: 0;
654 }
655 
656 .md-show.md-effect-18 .md-content {
657     -webkit-transform: translateX(0);
658     -moz-transform: translateX(0);
659     -ms-transform: translateX(0);
660     transform: translateX(0);
661     opacity: 1;
662     -webkit-transition: all 0.5s 0.1s;
663     -moz-transition: all 0.5s 0.1s;
664     transition: all 0.5s 0.1s;
665 }
666 
667 /* Effect 19:  Slip in from the top with perspective on container */
668 .md-show.md-effect-19 ~ .container {
669     height: 100%;
670     overflow: hidden;
671 }
672 
673 .md-show.md-effect-19 ~ .md-overlay {
674     -webkit-transition: all 0.5s;
675     -moz-transition: all 0.5s;
676     transition: all 0.5s;
677 }
678 
679 .md-show.md-effect-19 ~ .container,
680 .md-show.md-effect-19 ~ .md-overlay {
681     -webkit-transform-style: preserve-3d;
682     -webkit-transform-origin: 50% 100%;
683     -webkit-animation: OpenTop 0.5s forwards ease-in;
684     -moz-transform-style: preserve-3d;
685     -moz-transform-origin: 50% 100%;
686     -moz-animation: OpenTop 0.5s forwards ease-in;
687     transform-style: preserve-3d;
688     transform-origin: 50% 100%;
689     animation: OpenTop 0.5s forwards ease-in;
690 }
691 
692 @-webkit-keyframes OpenTop {
693     50% { 
694         -webkit-transform: rotateX(10deg); 
695         -webkit-animation-timing-function: ease-out; 
696     }
697 }
698 
699 @-moz-keyframes OpenTop {
700     50% { 
701         -moz-transform: rotateX(10deg); 
702         -moz-animation-timing-function: ease-out; 
703     }
704 }
705 
706 @keyframes OpenTop {
707     50% { 
708         transform: rotateX(10deg); 
709         animation-timing-function: ease-out; 
710     }
711 }
712 
713 .md-effect-19 .md-content {
714     -webkit-transform: translateY(-200%);
715     -moz-transform: translateY(-200%);
716     -ms-transform: translateY(-200%);
717     transform: translateY(-200%);
718     opacity: 0;
719 }
720 
721 .md-show.md-effect-19 .md-content {
722     -webkit-transform: translateY(0);
723     -moz-transform: translateY(0);
724     -ms-transform: translateY(0);
725     transform: translateY(0);
726     opacity: 1;
727     -webkit-transition: all 0.5s 0.1s;
728     -moz-transition: all 0.5s 0.1s;
729     transition: all 0.5s 0.1s;
730 }
731 
732 @media screen and (max-width: 32em) {
733     body { font-size: 75%; }
734 }