Question

Without using a JavaScript framework like jQTouch and jQuery Mobile, is there a way to mimic the native iOS page flip animation and similar transitions using only HTML5 and CSS3?

I basically want to mimic these but without JavaScript:
http://www.jqtouch.com/preview/demos/main/#animations (you must view this page on an iPhone for it to render properly)

Answer 1

Yes, just look at the jQtouch CSS file (jqtouch.css).

All the animations are listed there. For example:

@-webkit-keyframes flipRightIn {
    0% {
        -webkit-transform: rotateY(-180deg) scale(.8);
    }
    100% {
        -webkit-transform: rotateY(0deg) scale(1);
    }
}

@-webkit-keyframes flipRightOut {
    0% {
        -webkit-transform: rotateY(0deg) scale(1);
    }
    100% {
        -webkit-transform: rotateY(180deg) scale(.8);
    }
}

Then create the animation class:

.flipright.in {
    -webkit-animation-name: flipRightIn;
}

Pull what you need (since it’s MIT licensed) and don’t forget to attribute your source.