CSS3 translate out of screen

Question

For a number of projects now I have had elements on the page which I want to translate out of the screen area (have them fly out of the document). In proper code this should be

Answer 1

I recently built an app which used precisely this technique for sliding 'panels' (or pages) and tabs of the application in and out of view. A basic implementation of the tabs mechanism can be seen here.

Basically (pesudo-code to illustrate the concept, minus prefixes etc):

.page {
    transform: translateY(100%);
}

.page.active {
    transform: translateY(0%);
}

The problem I had was that Android Webkit in particular wouldn't calculate percentage values correctly. In the end I had to use script to grab the viewport width and specify the value in pixels, then write the rules using a library for dynamic stylesheet parsing.

But eventually, and in spite of only these minor platform-specific problems, this worked perfectly for me.