Pure CSS 3D Animated Growl-Style Notification

HTML

<iframe src="http://google.com"></iframe>

<div class="notifications">
    <div class="notif">
        <div class="shine"></div>
        <div class="head">Super Shiny and Awesome Notification</div>
        <div class="text">
            A short two line super awesome description<br/>
            about what this notification is for
        </div>
    </div>
</div>













<div class="sharing">
    You think that's cool? Why not follow me? <br/><br/>
    <!-- AddThis Button BEGIN -->
    <div class="addthis_toolbox addthis_default_style">
        <a class="addthis_button_twitter_follow_native" tf:screen_name="thejameskyle"></a>
    </div>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4dafbbd349ef8622"></script>
    <!-- AddThis Button END -->
</div>

CSS

.notifications {
    position: fixed;
         top: 40px;
        left: 10px;
    -webkit-perspective: 2000;
     -khtml-perspective: 2000;
       -moz-perspective: 2000;
         -o-perspective: 2000;
            perspective: 2000;
}
.notif {
    padding: 10px;
    width: 250px;
    margin-bottom: 10px;
    
    border-radius: 5px;
    overflow: hidden;
    
    background: #000;
    border: 1px solid #000;
    box-shadow: rgba(0,0,0,0.35) 0px 3px 6px, inset rgba(255,255,255,0.15) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 0px 1px;
    
    -webkit-transform-style: preserve-3d;
     -khtml-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
    
    
    -webkit-backface-visibility: hidden;
     -khtml-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
         -o-backface-visibility: hidden;
            backface-visibility: hidden;
    
    -webkit-animation: flip 1s 1 linear;
     -khtml-animation: flip 1s 1 linear;
       -moz-animation: flip 1s 1 linear;
         -o-animation: flip 1s 1 linear;
            animation: flip 1s 1 linear;
        
    opacity: 0.9;
}
.notif .shine {
    position: absolute;
    width: 100%;
    height: 100%;
    
    margin-left: 50%;
    margin-top: -10px;
    padding-bottom: 10px;
    
    -webkit-transform-style: flat;
     -khtml-transform-style: flat;
       -moz-transform-style: flat;
         -o-transform-style: flat;
            transform-style: flat;
    
    -webkit-transform: skew(45deg);
     -khtml-transform: skew(45deg);
       -moz-transform: skew(45deg);
         -o-transform: skew(45deg);
            transform: skew(45deg);
    
    -webkit-animation: shine-in 1s 1 ease-out;
     -khtml-animation: shine-in 1s 1 ease-out;
       -moz-animation: shine-in 1s 1 ease-out;
         -o-animation: shine-in 1s 1 ease-out;
            animation: shine-in 1s 1 ease-out;
    
    background:...

JavaScript

/****** HA! NO JAVASCRIPT NECESSARY!! ******/