Ver código fonte

updated transition styles to work with vertical centering (#70)

Hakim El Hattab 12 anos atrás
pai
commit
ecac983116
1 arquivos alterados com 18 adições e 23 exclusões
  1. 18 23
      css/reveal.css

+ 18 - 23
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;