fix vertical slide transition and hit areas of rolling links

css/main.css

@@ -138,27 +138,24 @@ h1 {
 	        transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
 }
 
-#main section.past {
+#main section.present {
 	display: block;
-	opacity: 0;
+    position: absolute;
-	
+    z-index: 10;
-	-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-	   -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-	        transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
 }
 
+
 /*********************************************
  * DEFAULT THEME
  *********************************************/
 
-#main section.present {
+#main section.past {
 	display: block;
-    position: absolute;
+	opacity: 0;
-    z-index: 10;
 	
-    -webkit-transform-style: flat;
+	-webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-	   -moz-transform-style: flat;
+	   -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
-	        transform-style: flat;
+	        transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
 }
 
 #main section.future {
@@ -204,6 +201,17 @@ h1 {
 	        transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
 }
 
+.concave #main section>section.past {
+	-webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
+	   -moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
+	        transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
+}
+.concave #main section>section.future {
+	-webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
+	   -moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
+	        transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
+}
+
 
 /*********************************************
  * LINEAR THEME
@@ -433,7 +441,6 @@ img {
 
 	}
 
-
 /*********************************************
  * ROLLING LINKS
  *********************************************/
@@ -461,6 +468,8 @@ img {
     position: relative;
     padding: 0 2px;
 
+	pointer-events: none;
+
     -webkit-transition: all 400ms ease;
        -moz-transition: all 400ms ease;
             transition: all 400ms ease;

index.html

@@ -21,7 +21,7 @@
 			
 			<section>
 				<h1>Reveal.js</h1>
-				<h3 class="inverted">With 3D effects. And stuff.</h3>
+				<h3 class="inverted">A CSS 3D Slideshow</h3>
 				<script>
 					// Delicously hacky. Look away.
 					if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) )
@@ -183,7 +183,7 @@ linkify( 'a' );
 				controls: true,
 
 				// Apply a 3D roll to links on hover
-				rollingLinks: false,
+				rollingLinks: true,
 
 				// Styling themes, only affects transitions for now
 				theme: 'default' // default/concave/linear