From ecac98311606880bb8253202397afb6ee69cd832 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sat, 10 Nov 2012 16:01:56 -0500 Subject: [PATCH] updated transition styles to work with vertical centering (#70) --- css/reveal.css | 41 ++++++++++++++++++----------------------- 1 file changed, 18 insertions(+), 23 deletions(-) diff --git a/css/reveal.css b/css/reveal.css index 7192a2d..174518e 100644 --- a/css/reveal.css +++ b/css/reveal.css @@ -525,10 +525,10 @@ body { -ms-perspective: 600px; perspective: 600px; - -webkit-perspective-origin: 0% -25%; - -moz-perspective-origin: 0% -25%; - -ms-perspective-origin: 0% -25%; - perspective-origin: 0% -25%; + -webkit-perspective-origin: 0px -100px; + -moz-perspective-origin: 0px -100px; + -ms-perspective-origin: 0px -100px; + perspective-origin: 0px -100px; } .reveal .slides>section, @@ -547,19 +547,24 @@ body { -ms-transform-style: preserve-3d; transform-style: preserve-3d; - -webkit-transition: -webkit-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + -webkit-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: -moz-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + -moz-transition: -moz-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + -moz-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -ms-transition: -ms-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + -ms-transition: -ms-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + -ms-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: -o-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + -o-transition: -o-transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + -o-transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - transition: transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + transition: transform-origin 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), + transform 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), visibility 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985), opacity 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } @@ -661,15 +666,6 @@ body { * ZOOM TRANSITION *********************************************/ -.reveal.zoom .slides>section, -.reveal.zoom .slides>section>section { - -webkit-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -moz-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -ms-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - -o-transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); - transition: all 600ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -} - .reveal.zoom .slides>section.past { opacity: 0; visibility: hidden; @@ -747,11 +743,6 @@ body { *********************************************/ .reveal.cube .slides { - -webkit-perspective-origin: 0% 25%; - -moz-perspective-origin: 0% 25%; - -ms-perspective-origin: 0% 25%; - perspective-origin: 0% 25%; - -webkit-perspective: 1300px; -moz-perspective: 1300px; -ms-perspective: 1300px; @@ -760,6 +751,7 @@ body { .reveal.cube .slides section { padding: 30px; + min-height: 600px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; @@ -770,6 +762,9 @@ body { -moz-box-sizing: border-box; box-sizing: border-box; } + .reveal.center.cube .slides section { + min-height: auto; + } .reveal.cube .slides section:not(.stack):before { content: ''; position: absolute;