fix vertical slide transition and hit areas of rolling links

diff --git a/css/main.css b/css/main.css
index bb6e183b64806017f4e7e2539dce3cb777fe70c6..83d53ba37868863e527e1e5ec8a98620991650b4 100644 (file)
--- a/css/main.css
+++ b/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;
-       
-       -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);
+    position: absolute;
+    z-index: 10;
 }
 
+
 /*********************************************
  * DEFAULT THEME
  *********************************************/
 
-#main section.present {
+#main section.past {
        display: block;
-    position: absolute;
-    z-index: 10;
-
-    -webkit-transform-style: flat;
-          -moz-transform-style: flat;
-               transform-style: flat;
+       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);
+               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;

diff --git a/index.html b/index.html
index a1f7e6ea6695e164abf13d591240fe1407eac34f..890925ed222ccfdc63eb46a47eabc418ea1536ce 100644 (file)
--- a/index.html
+++ b/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