diff --git a/css/structure/index.php b/css/structure/index.php
index 0687ecf9..ec4ff6ff 100644
--- a/css/structure/index.php
+++ b/css/structure/index.php
@@ -9,6 +9,7 @@ $files = array_merge($files, array(
 	'../../structure/jquery.mobile.transitions.slidedown.css',
 	'../../structure/jquery.mobile.transitions.slideup.css',
 	'../../structure/jquery.mobile.transitions.flip.css',
+	'../../structure/jquery.mobile.transitions.turn.css',
 	'../../structure/jquery.mobile.transitions.flow.css',
 	'../../structure/jquery.mobile.grids.css',
 	'../../structure/jquery.mobile.headerfooter.css',
diff --git a/css/structure/jquery.mobile.transitions.turn.css b/css/structure/jquery.mobile.transitions.turn.css
new file mode 100644
index 00000000..c606b1f9
--- /dev/null
+++ b/css/structure/jquery.mobile.transitions.turn.css
@@ -0,0 +1,78 @@
+/* The properties in this rule are only necessary for the 'flip' transition.
+ * We need specify the perspective to create a projection matrix. This will add
+ * some depth as the element flips. The depth number represents the distance of
+ * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
+ * value.
+ */
+
+.viewport-turn {
+	-webkit-perspective: 1000;
+	-moz-perspective: 1000;
+	position: absolute;
+}
+.turn {
+	-webkit-backface-visibility:hidden;
+	-webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
+	-webkit-transform-origin: 0;
+	
+	-moz-backface-visibility:hidden;
+	-moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
+	-moz-transform-origin: 0;
+}
+
+.turn.out {
+	-webkit-transform: rotateY(-90deg) scale(.9);
+	-webkit-animation-name: flipouttoleft;
+	-moz-transform: rotateY(-90deg) scale(.9);
+	-moz-animation-name: flipouttoleft;
+}
+
+.turn.in {
+	-webkit-animation-name: flipintoright;
+	-moz-animation-name: flipintoright;
+}
+
+.turn.out.reverse {
+	-webkit-transform: rotateY(90deg) scale(.9);
+	-webkit-animation-name: flipouttoright;
+	-moz-transform: rotateY(90deg) scale(.9);
+	-moz-animation-name: flipouttoright;
+}
+
+.turn.in.reverse {
+	-webkit-animation-name: flipintoleft;
+	-moz-animation-name: flipintoleft;
+}
+
+@-webkit-keyframes flipouttoleft {
+    from { -webkit-transform: rotateY(0); }
+    to { -webkit-transform: rotateY(-90deg) scale(.9); }
+}
+@-moz-keyframes flipouttoleft {
+    from { -moz-transform: rotateY(0); }
+    to { -moz-transform: rotateY(-90deg) scale(.9); }
+}
+@-webkit-keyframes flipouttoright {
+    from { -webkit-transform: rotateY(0) ; }
+    to { -webkit-transform: rotateY(90deg) scale(.9); }
+}
+@-moz-keyframes flipouttoright {
+    from { -moz-transform: rotateY(0); }
+    to { -moz-transform: rotateY(90deg) scale(.9); }
+}
+@-webkit-keyframes flipintoleft {
+    from { -webkit-transform: rotateY(-90deg) scale(.9); }
+    to { -webkit-transform: rotateY(0); }
+}
+@-moz-keyframes flipintoleft {
+    from { -moz-transform: rotateY(-90deg) scale(.9); }
+    to { -moz-transform: rotateY(0); }
+}
+@-webkit-keyframes flipintoright {
+    from { -webkit-transform: rotateY(90deg) scale(.9); }
+    to { -webkit-transform: rotateY(0); }
+}
+@-moz-keyframes flipintoright {
+    from { -moz-transform: rotateY(90deg) scale(.9); }
+    to { -moz-transform: rotateY(0); }
+}
diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html
index f2f16302..297f41c8 100755
--- a/docs/pages/page-transitions.html
+++ b/docs/pages/page-transitions.html
@@ -25,19 +25,19 @@
 
 		<p>The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any page link or form submission with Ajax navigation: </p>
 
-
 <div class="ui-grid-a">
 	<div class="ui-block-a">
 		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="none">none</a>
 		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="fade">fade</a>
 		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="pop">pop</a>
 		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="flip">flip</a>
+		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="turn">turn</a>
 	</div>
 	<div class="ui-block-b">
-			<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slide">slide</a>
-			<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slideup">slideup</a>
-			<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slidedown">slidedown</a>
-			<a href="#dialog" data-role="button" data-rel="dialog" data-transition="flow">flow</a>
+		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slide">slide</a>
+		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slideup">slideup</a>
+		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slidedown">slidedown</a>
+		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="flow">flow</a>
 	</div>
 </div><!-- /grid-a -->
 
diff --git a/js/index.php b/js/index.php
index 3e5472aa..510dc7c3 100644
--- a/js/index.php
+++ b/js/index.php
@@ -24,6 +24,7 @@ $files = array(
 	'jquery.mobile.transition.slideup.js',
 	'jquery.mobile.transition.flip.js',
 	'jquery.mobile.transition.flow.js',
+	'jquery.mobile.transition.turn.js',
 	'jquery.mobile.degradeInputs.js',
 	'jquery.mobile.dialog.js',
 	'jquery.mobile.page.sections.js',
diff --git a/js/jquery.mobile.transition.turn.js b/js/jquery.mobile.transition.turn.js
new file mode 100644
index 00000000..1b10639c
--- /dev/null
+++ b/js/jquery.mobile.transition.turn.js
@@ -0,0 +1,9 @@
+/*
+* fallback transition for turn in non-3D supporting browsers (which tend to handle complex transitions poorly in general
+*/
+
+(function( $, window, undefined ) {
+
+$.mobile.transitionFallbacks.turn = "fade";
+
+})( jQuery, this );