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

One very simple, but not aesthetically pleasing solution is to define the class dynamically:

var stylesheet = document.styleSheets[0];
var ruleBlockHide;

and

//onresize
if(ruleBlockHide) stylesheet.deleteRule(ruleBlockHide);
ruleBlockHide = stylesheet.insertRule('.block.hide{ -webkit-transform:translateY(-'+window.innerHeight+'px); }',stylesheet.cssRules.length);

see: http://jsfiddle.net/PDU7T/

The reason a reference to the rule needs to be kept is that after each screen resize the rule has to be deleted and re-added.

Although this solution gets the job done, there has to be some DOM/CSS combination which would allow this to be done without javascript (something along the lines of a 100%x100% element containing such a block, but I haven't been able to figure out any transform based way).