fallback on 2d transform transitions via feature detect

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%);
 }
 
 

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>

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)' );