diff options
| author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2011-12-23 00:36:37 -0800 |
|---|---|---|
| committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2011-12-23 00:36:37 -0800 |
| commit | adc9ad19cebd73b863558c80dd03c223b427c669 (patch) | |
| tree | ac1f709342c05dbe24e4ca3472548c55e797d4e8 /css/main.css | |
| parent | f6dc5312980150c68510a955e4ce8e5d2691b412 (diff) | |
| download | fosdem-2018-presentation-adc9ad19cebd73b863558c80dd03c223b427c669.tar fosdem-2018-presentation-adc9ad19cebd73b863558c80dd03c223b427c669.tar.gz | |
fallback on 2d transform transitions via feature detect
Diffstat (limited to 'css/main.css')
| -rw-r--r-- | css/main.css | 43 |
1 files changed, 24 insertions, 19 deletions
diff --git a/css/main.css b/css/main.css index 851d262..1effe17 100644 --- a/css/main.css +++ b/css/main.css @@ -124,10 +124,11 @@ h1 { #main>section, #main>section>section { display: none; - position: absolute; width: 100%; min-height: 600px; + + z-index: 10; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; @@ -143,8 +144,8 @@ h1 { #main section.present { display: block; - position: absolute; - z-index: 10; + z-index: 11; + opacity: 1; } @@ -229,30 +230,34 @@ h1 { *********************************************/ .linear #main>section.past { - -webkit-transform: translate3d(-100%, 0, 0); - -moz-transform: translate3d(-100%, 0, 0); - -ms-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); + -webkit-transform: translate(-150%, 0); + -moz-transform: translate(-150%, 0); + -ms-transform: translate(-150%, 0); + -o-transform: translate(-150%, 0); + transform: translate(-150%, 0); } .linear #main>section.future { - -webkit-transform: translate3d(100%, 0, 0); - -moz-transform: translate3d(100%, 0, 0); - -ms-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); + -webkit-transform: translate(150%, 0); + -moz-transform: translate(150%, 0); + -ms-transform: translate(150%, 0); + -o-transform: translate(150%, 0); + transform: translate(150%, 0); } .linear #main section>section.past { - -webkit-transform: translate3d(0, -100%, 0); - -moz-transform: translate3d(0, -100%, 0); - -ms-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); + -webkit-transform: translate(0, -150%); + -moz-transform: translate(0, -150%); + -ms-transform: translate(0, -150%); + -o-transform: translate(0, -150%); + transform: translate(0, -150%); } .linear #main section>section.future { - -webkit-transform: translate3d(0, 100%, 0); - -moz-transform: translate3d(0, 100%, 0); - -ms-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); + -webkit-transform: translate(0, 150%); + -moz-transform: translate(0, 150%); + -ms-transform: translate(0, 150%); + -o-transform: translate(0, 150%); + transform: translate(0, 150%); } |