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

What I did is use the vh (view height) unit. It's always relative to the screen size, not the element itself:

/* moves the element one screen height down */
translateY(calc(100vh))

So if you know the position of the element in the screen (say top:320px), you can move it exactly off the screen:

/* moves the element down exactly off the bottom of the screen */
translateY(calc(100vh - 320px))