First, let me say that for my purposes I am working in a very controlled environment. Specifically, the prototype is usually targeted for 1 or 2 browsers, and is by no means production ready, so if you are aren't viewing this on one of those browsers (Safari, FireFox, Chrome on a Mac) the rest of the post will make sense, but if you are on IE or some versions of Chrome on PC, it may appear broken.
David DeSandro has some great 3D transform examples that provided a great starting point, and Tait Brown also has a helpful post on creating iOS style notifications. My demo is built from these two resources (along with some tweaks).
Basic structure includes a wrapper div, a parent div, and two nested divs that represent the front and back of the notification. The front div appears as it would normally in the UI when no notification is present. The back div houses the notification. When we want to display the notification, we simply flip the card, rotating it 180° so the the back is displayed. Note: Because of a Chrome bug regarding backface visibility, certain versions of Chrome on PC, do not render the notification correctly.
I've created an iPhonish looking demo here. But you could easily modify to work on fixed or responsive layout. You could also modify the behavior to work for a mobile web app as a kind of pseudo push notification by making an ajax call to a dynamic page that might, for example, hit a database to get updated records such as comments, messages, etc.