fallback on 2d transform transitions via feature detect

diff --git a/css/main.css b/css/main.css
index 851d2622a546b3817e974f81f7bafaa961f58289..1effe171e631249c75418300980e17928f9a071f 100644 (file)
--- a/css/main.css
+++ b/css/main.css
@@ -124,10 +124,11 @@ h1 {
 #main>section,
 #main>section>section {
        display: none;
-       
        position: absolute;
        width: 100%;
        min-height: 600px;
+
+    z-index: 10;
        
        -webkit-transform-style: preserve-3d;
           -moz-transform-style: preserve-3d;
@@ -143,8 +144,8 @@ h1 {
 
 #main section.present {
        display: block;
-    position: absolute;
-    z-index: 10;
+       z-index: 11;
+       opacity: 1;
 }
 
 
@@ -229,30 +230,34 @@ h1 {
  *********************************************/
 
 .linear #main>section.past {
-       -webkit-transform: translate3d(-100%, 0, 0);
-          -moz-transform: translate3d(-100%, 0, 0);
-           -ms-transform: translate3d(-100%, 0, 0);
-               transform: translate3d(-100%, 0, 0);
+       -webkit-transform: translate(-150%, 0);
+          -moz-transform: translate(-150%, 0);
+           -ms-transform: translate(-150%, 0);
+            -o-transform: translate(-150%, 0);
+               transform: translate(-150%, 0);
 }
 
 .linear #main>section.future {
-       -webkit-transform: translate3d(100%, 0, 0);
-          -moz-transform: translate3d(100%, 0, 0);
-           -ms-transform: translate3d(100%, 0, 0);
-               transform: translate3d(100%, 0, 0);
+       -webkit-transform: translate(150%, 0);
+          -moz-transform: translate(150%, 0);
+           -ms-transform: translate(150%, 0);
+            -o-transform: translate(150%, 0);
+               transform: translate(150%, 0);
 }
 
 .linear #main section>section.past {
-       -webkit-transform: translate3d(0, -100%, 0);
-          -moz-transform: translate3d(0, -100%, 0);
-           -ms-transform: translate3d(0, -100%, 0);
-               transform: translate3d(0, -100%, 0);
+       -webkit-transform: translate(0, -150%);
+          -moz-transform: translate(0, -150%);
+           -ms-transform: translate(0, -150%);
+            -o-transform: translate(0, -150%);
+               transform: translate(0, -150%);
 }
 .linear #main section>section.future {
-       -webkit-transform: translate3d(0, 100%, 0);
-          -moz-transform: translate3d(0, 100%, 0);
-           -ms-transform: translate3d(0, 100%, 0);
-               transform: translate3d(0, 100%, 0);
+       -webkit-transform: translate(0, 150%);
+          -moz-transform: translate(0, 150%);
+           -ms-transform: translate(0, 150%);
+            -o-transform: translate(0, 150%);
+               transform: translate(0, 150%);
 }
 
 

diff --git a/index.html b/index.html
index 2e7a002aeb726a03f1e7ffaa87ed15289171b5ee..c7e6e7ab9426bebdd9ebd4df6c3f9008371ea9d1 100644 (file)
--- a/index.html
+++ b/index.html
@@ -36,7 +36,7 @@
                                        support for CSS 3D transforms to see it in its full glory.
                                </p>
                                <p>
-                                       <i><small>- <a href="http://hakim.se">Hakim El Hattab</a></small></i>
+                                       <i><small>- <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small></i>
                                </p>
                        </section>
                        
@@ -202,6 +202,5 @@ linkify( 'a' );
                </script>
 
 
-               
        </body>
 </html>
\ No newline at end of file

diff --git a/js/reveal.js b/js/reveal.js
index 3dddf7d06970556ab3ac466068bddb040b5a52f9..01c7e8f5d47e79afbfee90ba3df0a0a854949289 100644 (file)
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -86,7 +86,13 @@ var Reveal = (function(){
                config = {},
 
                // Cached references to DOM elements
-               dom = {};
+               dom = {},
+
+               // Detect support for CSS 3D transforms
+               supports3DTransforms =  document.body.style['perspectiveProperty'] !== undefined ||
+                                                               document.body.style['WebkitPerspective'] !== undefined || 
+                                       document.body.style['MozPerspective'] !== undefined ||
+                                       document.body.style['msTransform'] !== undefined;
        
        /**
         * Starts up the slideshow by applying configuration
@@ -117,6 +123,11 @@ var Reveal = (function(){
                config.progress = options.progress === undefined ? false : options.progress;
                config.theme = options.theme === undefined ? 'default' : options.theme;
 
+               // Fall back on the 2D transform theme 'linear'
+               if( supports3DTransforms === false ) {
+                       config.theme = 'linear';
+               }
+
                if( config.controls ) {
                        dom.controls.style.display = 'block';
                }
@@ -240,9 +251,7 @@ var Reveal = (function(){
         * Wrap all links in 3D goodness.
         */
        function linkify() {
-               var supports3DTransforms =  document.body.style['webkitPerspective'] !== undefined || 
-                                       document.body.style['MozPerspective'] !== undefined ||
-                                       document.body.style['perspective'] !== undefined;
+               
 
         if( supports3DTransforms ) {
                var nodes = document.querySelectorAll( 'section a:not(.image)' );