From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Fri, 23 Dec 2011 08:36:37 +0000 (-0800)
Subject: fallback on 2d transform transitions via feature detect
X-Git-Tag: 1.1.0~6
X-Git-Url: http://git.tremily.us/?a=commitdiff_plain;h=adc9ad19cebd73b863558c80dd03c223b427c669;p=reveal.js.git

fallback on 2d transform transitions via feature detect
---

diff --git a/css/main.css b/css/main.css
index 851d262..1effe17 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 2e7a002..c7e6e7a 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 3dddf7d..01c7e8f 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)' );