From adc9ad19cebd73b863558c80dd03c223b427c669 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Fri, 23 Dec 2011 00:36:37 -0800
Subject: [PATCH] fallback on 2d transform transitions via feature detect

---
 css/main.css | 43 ++++++++++++++++++++++++-------------------
 index.html   |  3 +--
 js/reveal.js | 17 +++++++++++++----
 3 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/css/main.css b/css/main.css
index 851d2622..1effe171 100644
--- 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 2e7a002a..c7e6e7ab 100644
--- 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 3dddf7d0..01c7e8f5 100644
--- 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)' );