// Simulates a swinging sign in recent webkits.
// This example depends on mootools, but it's trivial to remove it.

var swinger = $('swing');
// Move the origin to the top of the div so it appears to hang
swinger.setStyle('-webkit-transform-origin', '50% 0 0');

// Set initial gradient
var gradient = "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(100%,#2756a5))";
swinger.setStyle('background', gradient)

var framerate = 50,
    timeout = 1000 / framerate;

swinger.addEvent('click', function(evt){
    
    if(swinger.retrieve('swinging')) return;
    
    var start = 0,
        scale = 60,
        rot = 0,
        step = .30,
        transform, stopHeight, gradient, shadowLen, shadowColor, shadow;
          
    var swing = function(){
        rot = Math.sin(start) * scale;
        start += step;
        scale *= .93;
        
        // handle '3d' rotation
        var transform = 'rotate3D(1, 0 , 0, '  + rot +'deg)';
        swinger.setStyle('-webkit-transform', transform);
        
        // add face shadow
        var stopHeight = 100 - Math.abs(rot),
            gradient = "-webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(" + stopHeight.toFixed(2) + "%, #254493))";
        swinger.setStyle('background', gradient)
            
        // add drop shadow
        var shadowLen = rot / 2 + 'px',
            shadowColor = '#aaa';
            shadow = ["0px", shadowLen, shadowLen, shadowColor].join(' ');
        swinger.setStyle('-webkit-box-shadow', shadow);
            
        if(scale > 1){
            swinger.store('swinging', true);
            setTimeout(swing, 50);
        }
        else{
            swinger.store('swinging', false);
        }
    };
    var timer = setTimeout(swing, timeout);
});

<div id="swing">
    Click to Swing
</div>

#swing{
    padding:100px 0;
    text-align:center;
    color:#fff;
    font-weight:bold;
    font-size:36px;
    border: 1px solid #ddd;
    font-family:sans-serif;
}

jsFiddle