HTML and CSS Reference
In-Depth Information
When dealing with touch events and transitions, the first thing you'll want is to get a
handle on the current position of the element. Thanks to the CSSMatrix interface, which
is implemented by WebKit only at the time of this writing, you can get an instance of
WebKitCSSMatrix by passing the current transform's computed style.
function pageMove ( event ) {
// get position after transform
var curTransform =
new WebKitCSSMatrix ( window . getComputedStyle ( page ). webkitTransform );
var pagePosition = curTransform . m41 ;
Because we are using a CSS3 ease-out transition for the page flip, the usual
setLeft will not work.
For more information on WebKitCSSMatrix , go to Apple's developer
page .
Next we want to figure out which direction the user is flipping and set a threshold for
an event (page navigation) to take place.
if ( pagePosition >= 0 ) {
//moving current page to the right
//so means we're flipping backwards
if (( pagePosition > pageFlipThreshold ) ||
( swipeTime < swipeThreshold )) {
//user wants to go backward
slideDirection = 'right' ;
} else {
slideDirection = null ;
} else {
//current page is sliding to the left
if (( swipeTime < swipeThreshold ) ||
( pagePosition < pageFlipThreshold )) {
//user wants to go forward
slideDirection = 'left' ;
} else {
slideDirection = null ;
You'll also notice that we are measuring the swipeTime in milliseconds as well. This
allows the navigation event to fire if the user quickly swipes the screen to turn a page.
To position the page and make the animations look native while a finger is touching the
screen, we use CSS3 transitions after each event firing.
Search WWH ::

Custom Search