diff options
| author | Hakim El Hattab <hakim.elhattab@gmail.com> | 2013-11-01 12:27:36 -0400 |
|---|---|---|
| committer | Hakim El Hattab <hakim.elhattab@gmail.com> | 2013-11-01 12:27:36 -0400 |
| commit | d4e6fa12bf4b5c8dbdcd799b5a952577036a83cb (patch) | |
| tree | 21390ecead3e0eea8a855f8f88ca9d6731a8af35 /css/reveal.css | |
| parent | 778969c0002f140d699a86fe9bcd7f375f8d3087 (diff) | |
| download | fosdem-2018-presentation-d4e6fa12bf4b5c8dbdcd799b5a952577036a83cb.tar fosdem-2018-presentation-d4e6fa12bf4b5c8dbdcd799b5a952577036a83cb.tar.gz | |
add convex background transition
Diffstat (limited to 'css/reveal.css')
| -rw-r--r-- | css/reveal.css | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/css/reveal.css b/css/reveal.css index cbb8f93..176ac7d 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -1268,6 +1268,11 @@ body { position: absolute; width: 100%; height: 100%; + + -webkit-perspective: 600px; + -moz-perspective: 600px; + -ms-perspective: 600px; + perspective: 600px; } .reveal .slide-background { position: absolute; @@ -1358,6 +1363,46 @@ body { } +/* Curve sliding transition style */ +.reveal[data-background-transition=convex]>.backgrounds .slide-background.past, +.reveal>.backgrounds .slide-background.past[data-background-transition=convex] { + opacity: 0; + + -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); + transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); +} +.reveal[data-background-transition=convex]>.backgrounds .slide-background.future, +.reveal>.backgrounds .slide-background.future[data-background-transition=convex] { + opacity: 0; + + -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); + -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); + -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); +} + +.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.past, +.reveal>.backgrounds .slide-background>.slide-background.past[data-background-transition=convex] { + opacity: 0; + + -webkit-transform: translate3d(0, -300px, 0) rotateX(90deg) translate3d(0, -300px, 0); + -moz-transform: translate3d(0, -300px, 0) rotateX(90deg) translate3d(0, -300px, 0); + -ms-transform: translate3d(0, -300px, 0) rotateX(90deg) translate3d(0, -300px, 0); + transform: translate3d(0, -300px, 0) rotateX(90deg) translate3d(0, -300px, 0); +} +.reveal[data-background-transition=convex]>.backgrounds .slide-background>.slide-background.future, +.reveal>.backgrounds .slide-background>.slide-background.future[data-background-transition=convex] { + opacity: 0; + + -webkit-transform: translate3d(0, 300px, 0) rotateX(-90deg) translate3d(0, 300px, 0); + -moz-transform: translate3d(0, 300px, 0) rotateX(-90deg) translate3d(0, 300px, 0); + -ms-transform: translate3d(0, 300px, 0) rotateX(-90deg) translate3d(0, 300px, 0); + transform: translate3d(0, 300px, 0) rotateX(-90deg) translate3d(0, 300px, 0); +} + + /* Global transition speed settings */ .reveal[data-transition-speed="fast"]>.backgrounds .slide-background { -webkit-transition-duration: 400ms; |