From 3fa01ab1072cc85eb1043c0707843fae9fed0c75 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab <hakim.elhattab@gmail.com>
Date: Mon, 26 Dec 2011 21:57:37 -0800
Subject: [PATCH] updated copy in slides, added one that explains transitions

---
 css/main.css | 18 +++++++++---------
 index.html   | 16 ++++++++++++----
 js/reveal.js |  3 +++
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/css/main.css b/css/main.css
index e32c8c0..da48245 100644
--- a/css/main.css
+++ b/css/main.css
@@ -586,7 +586,7 @@ html {
  * BOX TRANSITION
  *********************************************/
 
-#reveal.box .slides {
+#reveal.cube .slides {
 	margin-top: -350px;
 
 	-webkit-perspective-origin: 50% 25%;
@@ -600,14 +600,14 @@ html {
 	        perspective: 1300px;
 }
 
-#reveal.box .slides section {
+#reveal.cube .slides section {
 	padding: 30px;
 	
 	-webkit-box-sizing: border-box;
 	   -moz-box-sizing: border-box;
 	        box-sizing: border-box;
 }
-	#reveal.box .slides section:not(.stack):before {
+	#reveal.cube .slides section:not(.stack):before {
 		content: '';
 		position: absolute;
 		display: block;
@@ -624,7 +624,7 @@ html {
 		     -o-transform: translateZ( -20px );
 		        transform: translateZ( -20px );
 	}
-	#reveal.box .slides section:not(.stack):after {
+	#reveal.cube .slides section:not(.stack):after {
 		content: '';
 		position: absolute;
 		display: block;
@@ -645,12 +645,12 @@ html {
 		        transform: translateZ(-90px) rotateX( 65deg );
 	}
 
-#reveal.box .slides>section.stack {
+#reveal.cube .slides>section.stack {
 	padding: 0;
 	background: none;
 }
 
-#reveal.box .slides>section.past {
+#reveal.cube .slides>section.past {
 	-webkit-transform-origin: 100% 0%;
 	   -moz-transform-origin: 100% 0%;
 	    -ms-transform-origin: 100% 0%;
@@ -662,7 +662,7 @@ html {
 	        transform: translate3d(-100%, 0, 0) rotateY(-90deg);
 }
 
-#reveal.box .slides>section.future {
+#reveal.cube .slides>section.future {
 	-webkit-transform-origin: 0% 0%;
 	   -moz-transform-origin: 0% 0%;
 	    -ms-transform-origin: 0% 0%;
@@ -674,7 +674,7 @@ html {
 	        transform: translate3d(100%, 0, 0) rotateY(90deg);
 }
 
-#reveal.box .slides>section>section.past {
+#reveal.cube .slides>section>section.past {
 	-webkit-transform-origin: 0% 100%;
 	   -moz-transform-origin: 0% 100%;
 	    -ms-transform-origin: 0% 100%;
@@ -686,7 +686,7 @@ html {
 	        transform: translate3d(0, -100%, 0) rotateX(90deg);
 }
 
-#reveal.box .slides>section>section.future {
+#reveal.cube .slides>section>section.future {
 	-webkit-transform-origin: 0% 0%;
 	   -moz-transform-origin: 0% 0%;
 	    -ms-transform-origin: 0% 0%;
diff --git a/index.html b/index.html
index 93bb2dd..8251079 100644
--- a/index.html
+++ b/index.html
@@ -74,12 +74,20 @@
 				<section>
 					<h2>Holistic Overview</h2>
 					<p>
-						Press <em>SPACE</em> to enter the slide overview. This allows you to navigate faster 
-						in larger decks using the keyboard.
+						Press <strong>SPACE</strong> to enter the slide overview.
 					</p>
+				</section>
+
+				<section>
+					<h2>Transition Styles</h2>
 					<p>
-						This feature is highly experimental and will be updated to boost performance.
+						You can select from different transitions, like:
 					</p>
+					<ul>
+						<li><a href="http://lab.hakim.se/reveal-js/?transition=cube">Cube</a></li>
+						<li><a href="http://lab.hakim.se/reveal-js/?transition=page">Page</a></li>
+						<li><a href="http://lab.hakim.se/reveal-js/?transition=concave">Concave</a></li>
+					</ul>
 				</section>
 					
 				<section>
@@ -218,7 +226,7 @@
 				theme: query.theme || 'default', // default/neon
 
 				// Transition style
-				transition: query.transition || 'default' // default/box/page/concave/linear(2d),
+				transition: query.transition || 'default' // default/cube/page/concave/linear(2d),
 			});
 
 			hljs.initHighlightingOnLoad();
diff --git a/js/reveal.js b/js/reveal.js
index c3b5cc9..5f99770 100644
--- a/js/reveal.js
+++ b/js/reveal.js
@@ -134,6 +134,9 @@ var Reveal = (function(){
 		config.transition = options.transition === undefined ? 'default' : options.transition;
 		config.theme = options.theme === undefined ? 'default' : options.theme;
 
+		// Transition alias
+		if( config.transition === 'box' ) config.transition = 'cube';
+
 		// Fall back on the 2D transform theme 'linear'
 		if( supports3DTransforms === false ) {
 			config.transition = 'linear';