CSS 3 Full Screen Page Transitions

While doing my research on cool CSS3 properties and new ideas, I ran across a website called Cod Drops. They have some really cool tutorials and inventions on their site. One of my favorite inventions that they had come up with was to make a website feel more like software. I think our goal for every project is to take the user experience to the next level which requires a more cohesive design and a smooth experience that makes you feel like you are having an experience rather than point and clicking on a website.

When closing the current view, it will move back to the initial position while the other boxes come back up again. Another type of page transition can be seen on the works section where we will show a portfolio item by sliding in a panel from the bottom. The current view gets scaled down and disappears in the back.

All effects are done with CSS transitions and controlled by applying classes with JavaScript. The whole layout is flexible and some media queries are added to size down things for smaller screens. 

If you feel like you are trapped, use the 'escape' key to get back to the homepage.

This is my variation of the CSS 3 Fullscreen Page Transitions.

For example - this is how I would display the work panel on click:
  z-index: 1000; 
 opacity: 1; 
 -webkit-transform: translateY(-100%); 
 -webkit-transition: -webkit-transform 0.5s ease-in-out;
 -moz-transform: translateY(-100%); 
 -moz-transition: -moz-transform 0.5s ease-in-out; 
 transform: translateY(-100%); 
 transition: transform 0.5s ease-in-out; 
 -ms-transform: translateY(-100%); 

This is how I would hide that work panel upon close:
  opacity: 0; 
 -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; 
 -webkit-transform: translateY(-100%) scale(0.5); 
 -moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; 
 -moz-transform: translateY(-100%) scale(0.5); 
 transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; 
 transform: translateY(-100%) scale(0.5); 
 -ms-transform: translateY(-100%) scale(0.5); 
 z-index: 0; 

All of the transformations occur with valid css, but the actions are triggered by basic javascript functions. The functions are kept in a separate JS file just for the ease of visualizing how the triggers work. You might have an easier time viewing the actual source once you check out the live demo.