From 43b5537d5b1231406eb8b4bdb19f20436b805c19 Mon Sep 17 00:00:00 2001
From: scottjehl <scott@scottjehl.com>
Date: Mon, 9 Jan 2012 21:09:12 +0700
Subject: [PATCH] added an experimental 3D transition, "flow"

---
 css/structure/index.php                       |  1 +
 .../jquery.mobile.transitions.flow.css        | 85 +++++++++++++++++++
 docs/pages/page-transitions.html              |  3 +-
 3 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 css/structure/jquery.mobile.transitions.flow.css

diff --git a/css/structure/index.php b/css/structure/index.php
index 2caf80b5..0687ecf9 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.flow.css',
 	'../../structure/jquery.mobile.grids.css',
 	'../../structure/jquery.mobile.headerfooter.css',
 	'../../structure/jquery.mobile.navbar.css',
diff --git a/css/structure/jquery.mobile.transitions.flow.css b/css/structure/jquery.mobile.transitions.flow.css
new file mode 100644
index 00000000..1a3c2eda
--- /dev/null
+++ b/css/structure/jquery.mobile.transitions.flow.css
@@ -0,0 +1,85 @@
+/* flow transition */
+.flow {
+	-webkit-transform-origin: 30% 30%;
+	-moz-transform-origin: 30% 30%;
+}
+.flow.out {
+	-webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg);
+	-webkit-animation-name: flowouttoleft;
+	-webkit-animation-timing-function: ease;
+	-moz-transform:  translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg);
+	-moz-animation-name: flowouttoleft;
+	-moz-animation-timing-function: ease;
+}
+
+.flow.in {
+	-webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);;
+	-webkit-animation-name: flowinfromright;
+	-webkit-animation-timing-function: ease;
+	-moz-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);;
+	-moz-animation-name: flowinfromright;
+	-moz-animation-timing-function: ease;
+}
+
+.flow.out.reverse {
+	-webkit-transform: translateX(100%);
+	-webkit-animation-name: flowouttoright;
+	-moz-transform: translateX(100%);
+	-moz-animation-name: flowouttoright;
+}
+
+.flow.in.reverse {
+	-webkit-animation-name: flowinfromleft;
+	-moz-animation-name: flowinfromleft;
+}
+
+@-webkit-keyframes flowouttoleft {
+    0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
+	60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+	70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+    100% { -webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+}
+@-moz-keyframes flowouttoleft {
+    0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
+	60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+	70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+    100% { -webkit-transform:  translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+}
+
+@-webkit-keyframes flowouttoright {
+    0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
+	60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+	70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+    100% { -webkit-transform:  translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+}
+@-moz-keyframes flowouttoright {
+    0% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
+	60% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+	70% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+    100% { -webkit-transform:  translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+}
+
+@-webkit-keyframes flowinfromleft {
+    0% { -webkit-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+	30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+	40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+    100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
+}
+@-moz-keyframes flowinfromleft {
+    0% { -moz-transform: translateX(-100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+	30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+	40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+    100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
+}
+@-webkit-keyframes flowinfromright {
+    0% { -webkit-transform: translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+	30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+	40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+    100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0);; }
+}
+@-moz-keyframes flowinfromright {
+    0% { -moz-transform: translateX(100%) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+	30% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+	40% { -webkit-transform: translateX(0) scale(.7) translateZ(-200px) perspective(900) rotateX(30deg); }
+    100% { -webkit-transform: translateX(0) scale(1) translateZ(0) perspective(900) rotateX(0); }
+}
\ No newline at end of file
diff --git a/docs/pages/page-transitions.html b/docs/pages/page-transitions.html
index c31dedbd..6c16f357 100755
--- a/docs/pages/page-transitions.html
+++ b/docs/pages/page-transitions.html
@@ -37,6 +37,7 @@
 			<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 -->
 
@@ -271,7 +272,7 @@ $.mobile.defaultTransitionHandler = myTransitionHandler;
 					<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="rotate">rotate</a>
+					<a href="#dialog" data-role="button" data-rel="dialog" data-transition="flow">flow</a>
 			</div>
 		</div><!-- /grid-a -->