updated transition styles to work with vertical centering (#70)
authorHakim El Hattab <hakim.elhattab@gmail.com>
Sat, 10 Nov 2012 21:01:56 +0000 (16:01 -0500)
committerHakim El Hattab <hakim.elhattab@gmail.com>
Sat, 10 Nov 2012 21:01:56 +0000 (16:01 -0500)
css/reveal.css

index 7192a2dcb239fc8e34c0bf1f9d561bd6f0fcfdb6..174518e04dd4388af83ddf1499675f86f28466dd 100644 (file)
@@ -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;