jsFiddle_CSS3pleasePlayground

This is my first dabble in jsFiddle. I utilized the awesomeness of jQuery and the fantasticity of the site css3please.com

by corygack

HTML

<div id='myDiv' ><span class='rndCrnr'>Yo! jsFiddle</span></div>

CSS

#myDiv{
    text-align:center;
    padding:5px;
    
    
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    -moz-box-shadow: 0px 0px 4px #ffffff; 
    -webkit-box-shadow: 0px 0px 4px #ffffff; 
    box-shadow: 0px 0px 4px #ffffff; 
    background-color: #444444;
    background-image: -moz-linear-gradient(top, #444444, #999999); 
    background-image: -o-linear-gradient(top, #444444, #999999); 
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); 
    background-image: -webkit-linear-gradient(#444444, #999999); 
    background-image: linear-gradient(top, #444444, #999999);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); 
    margin-top:100px;
    margin-left:30px;
    -moz-transition: all 0.3s ease-out;  
    -o-transition: all 0.3s ease-out;  
    -webkit-transition: all 0.3s ease-out;  
    transition: all 0.3s ease-out;  
    
}
.u-left{
    -moz-transform: rotate(7.5deg);  
    -o-transform: rotate(7.5deg);  
    -webkit-transform: rotate(7.5deg);  
    -ms-transform: rotate(7.5deg);  
    transform: rotate(7.5deg);  
    filter: progid:DXImageTransform.Microsoft.Matrix( 
        M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
    zoom: 1;
    text-shadow: 1px 1px 3px #888; 
    
    
}
.u-right{
    -moz-transform: rotate(-7.5deg);  
    -o-transform: rotate(-7.5deg);  
    -webkit-transform: rotate(-7.5deg);  
    -ms-transform: rotate(-7.5deg);  
    transform: rotate(-7.5deg);  
    filter: progid:DXImageTransform.Microsoft.Matrix( 
        M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
    zoom: 1;
    text-shadow: 1px 1px 3px #888; 
    
    
}
.rndCrnr{
    text-align:center;
    padding:2px;
    border: solid black 1px;
   ...

JavaScript

var switchClasses = function(o, n){
    if ($('#myDiv').hasClass(n)){
        $('#myDiv').removeClass(o).addClass(n);
    } else {
        $('#myDiv').addClass(n);
    }
    
}

$('#myDiv').bind('eventFired', function() {
    switchClasses('u-left','u-right');
});


var fireEvent = function() {
    $('#myDiv').trigger('eventFired');
    setTimeout(function() {
        startOver();
    }, 3e3);

};

var startOver = function() {
    switchClasses('u-right','u-left');
    setTimeout(function() {
        fireEvent();
    }, 3e3);

};


startOver();