From d96ef2ea7daf159414ba528cf4d58b14bc0579a8 Mon Sep 17 00:00:00 2001 From: Kin Blas Date: Fri, 29 Oct 2010 13:23:04 -0700 Subject: [PATCH] Fixed 138 - transition: fix flip (and cube?) - Added a -webkit-perspective property to the body element, since it is the container for the element (ui-page) that actually flips. We need specify this so a projection matrix gets created, giving the viewer some perspective. The 1000 represents the depth in pixels (the distance from the viewer to the z-plane). According to the CSS3 spec 1000 is a moderate value. Lower values make the effect more extreme. --- themes/default/jquery.mobile.transitions.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/themes/default/jquery.mobile.transitions.css b/themes/default/jquery.mobile.transitions.css index 0c36a139..0ea9f54a 100644 --- a/themes/default/jquery.mobile.transitions.css +++ b/themes/default/jquery.mobile.transitions.css @@ -144,6 +144,16 @@ Built by David Kaneda and maintained by Jonathan Stark. z-index: 0; } +/* The properties in this body 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. + */ +body { + -webkit-perspective: 1000; +} + .flip { -webkit-animation-duration: .65s; }