jQuery & CSS3 analogue clock V2.1

by secretgspot

HTML

<link href="http://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" type="text/css">

<div id="clock">
    
    <div class="clockGlass"></div>
    
    <!--// /* PLUGIN BUILD THIS */
    <div class="digit" style="left:56px;top:0px;"><span>12</span></div>
    <div class="digit" style="left:84px;top:7.50px;">1</div>
    /* ...12 digits... */
    <div class="sec" style="-webkit-transform:rotate(246deg);"><div class="clockwise"></div></div>
    <div class="min" style="-webkit-transform:rotate(270deg);"><div class="clockwise"></div></div>
    <div class="hour" style="-webkit-transform:rotate(412.5deg);"><div class="clockwise"></div></div>
    <div class="time">13:45:41</div>
    <div class="innerCenter"></div>
    //-->
    
</div>

CSS

/*
    // Pixel polished jQuery & CSS3 analogue clock
    // by [email protected] 08/10/2011
    
    //> Colors : easy to change, Sizes and positions : more tricky
    // Colors are based on a white semi-transparent theme :
    // replace "255,255,255" by "0,0,0" to blackify... or wathever you want
    // Mostly elements that need to be centered... are centered in JS, 
    // So only kee in mind your SIZES ((---MOD---))
*/

* { margin:0; padding:0; }
body { background-color:#026873; }

/* Debug: div { border:1px solid rgba(0,0,0,0.5); } */

/* ------- Clock container ------ */

div#clock {
    position:relative; /* childs are abs. positionned */
    display:block;
    width:130px; height:130px; /* (---MOD---) */
    margin:30px auto; /* (---MOD---) or float left */
    border-radius:50%; /* (---MOD---) All round ? */
    background:grey;
    background:rgba(0,0,0,0.1);
    transition:all 250ms ease-in-out; /* for mouseover effect */
        -webkit-transition:all 250ms ease-in-out;
        -moz-transition:all 250ms ease-in-out;
        -ms-transition:all 250ms ease-in-out;
        -o-transition:all 250ms ease-in-out;
    box-shadow:0 2px 6px rgba(0,0,0,0.3);
       -o-box-shadow:0 2px 6px rgba(0,0,0,0.3);
       -webkit-box-shadow:0 2px 6px rgba(0,0,0,0.3);
       -moz-box-shadow:0 2px 6px rgba(0,0,0,0.3);
       -ms-box-shadow:0 2px 6px rgba(0,0,0,0.3);
}
    div#clock:hover {
        transform:scale(1.3);/* Example */
            -moz-transform:scale(1.3);
            -webkit-transform:scale(1.3);
            -ms-transform:scale(1.3);
            -o-transform:scale(1.3);           
    }

div.clockGlass { /* Give clock glass effect */
    position:absolute;
    z-index:6;
    top:0; left:0;
    right:0; bottom:0;
    border-radius:50%; /* (---MOD---) */
    /* online editor : http://www.colorzilla.com/gradient-editor/ */
    background:linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 100%);
       ...

JavaScript

/*
    // Pixel polished jQuery & CSS3 Analogue Clock plugin V2.1
    // by [email protected] 10/10/2011
    // Infos : http://www.b2bweb.fr/molokoloco/pixels-polished-jquery-css3-analogue-clock/
    // jsFiddle : http://jsfiddle.net/molokoloco/V2rFN/
*/

;(function($, window) {
    $.fn.extend({ // Extend jQuery with custom plugin
        
        // Cross browsers CSS rotate
        rotate: function(val) { // $('div').rotate('90deg');
            return this.each(function() {
                var rotate = 'rotate('+val+')';
                return $(this).css({'-moz-transform':rotate, '-webkit-transform':rotate, '-ms-transform':rotate, '-o-transform':rotate, transform:rotate});
            });
        },
        
        // Distribute elements clockwise inside a box
        circalise: function(options) { // $('div').circalise({targets:'div.unit'});
            options = $.extend({
                targets          :'> *', // childs elements to distribute inside this box
                rotateTargets    :false,
                startAngle       :270, // 270deg, start at top center (like a clock)
                xRadius          :null, // default radius to the radius of the box, minus target width
                yRadius          :null
            }, options || {});
            
            return this.each(function() {  
                var $this = $(this),
                    thisW = parseInt($this.innerWidth(), 10),
                    thisH = parseInt($this.innerHeight(), 10),
                    $targets = $this.find(options.targets),
                    increase = (Math.PI * 2) / $targets.length, // Rad cheeseCake  
                    angle = Math.PI * (options.startAngle / 180); // convert from DEG to RAD
                $targets.each(function() {
                    var $target = $(this),
                        xCenter = (thisW - parseInt($target.outerWidth(), 10)) / 2,
                        yCenter = (thisH - parseInt($target.outerHeight(), 10)) / 2,
...