Le trasformazioni CSS3 sono uno strumento molto potente e utile per dare vita alle nostre pagine web in maniera nativa, efficiente e ottimizzata. Tra le tante possibilità che avremmo con questi strumenti, abbiamo deciso di creare un demo che sicuramente riempirà di gioia i cuori dei tanti fan della nostra diva domenicale: signore e signori, ecco a voi un orologio analogico a Barbara D'Urso.

Partiamo dall'HTML:

<div id="wrapper"><br />  <div class="orologio"><br />    <div class="orologio2"><br />      <div class="quadrante"><br />        <!-- numeri --><br />        <div class="cinqueminuti" id="sixty"></div><br />        <div class="cinqueminuti" id="five"></div><br />        <div class="cinqueminuti" id="ten"></div><br />        <div class="cinqueminuti" id="fifteen"></div><br />        <div class="cinqueminuti" id="twenty"></div><br />        <div class="cinqueminuti" id="twentyfive"></div><br />        <div class="cinqueminuti" id="thirty"></div><br />        <div class="cinqueminuti" id="thirtyfive"></div><br />        <div class="cinqueminuti" id="fourty"></div><br />        <div class="cinqueminuti" id="fourtyfive"></div><br />        <div class="cinqueminuti" id="fifty"></div><br />        <div class="cinqueminuti" id="fiftyfive"></div><br />        <div class="numbers" id="dodici">12</div><br />        <div class="numbers" id="tre">3</div><br />        <div class="numbers" id="sei">6</div><br />        <div class="numbers" id="nove">9</div>     <br />        <!-- lancette --><br />        <div id="ore"></div><br />        <div id="secondi"></div><br />        <div id="minuti"></div><br />        <!-- centro --><br />        <div id="centerPoint"></div><br />      </div><br />    </div><br />  </div><br /></div>

Niente di particolare qui, solo i div per il quadrante, i minuti, le lancette e il centro dell'orologio.

Passiamo adesso al CSS, partendo dal quadrante:

#wrapper {<br />    width: 455px;<br />    margin: 30px auto;<br />    text-align: center;<br />}<br />.orologio {<br />    display: block;<br />    width: 405px;<br />    height: 405px;<br />    border:3px solid #3F1B05;<br />    background: #ddd; /* Old browsers */<br />    -moz-border-radius: 223px;<br />    -webkit-border-radius: 223px;<br />    border-radius: 223px;<br />    padding: 20px;<br />    position:relative;<br />}<br />.orologio2 {<br />    display: block;<br />    width: 363px;<br />    height: 363px;<br />    background: #111; /* Old browsers */<br />    -webkit-border-radius: 200px;<br />    -moz-border-radius: 200px;<br />    border-radius: 200px;<br />    border:6px solid #e1e1e1;<br />    padding: 16px;<br />}<br />.quadrante {<br />    display: block;<br />    width: 340px;<br />    height: 340px;<br />    background: #ffffff; /* Old browsers */<br />    -webkit-border-radius: 180px;<br />    -moz-border-radius: 180px;<br />    border-radius: 180px;<br />    border:10px solid #8e8e8e;<br />}<br />#centro{<br />    width: 24px;<br />    height: 24px;<br />    -moz-border-radius: 12px;<br />    -webkit-border-radius: 12px;<br />    border-radius: 12px;<br />    background-color: black;<br />    position: absolute;<br />    left: 210px;<br />    top: 208px;<br />}

anche qui non c'è niente di particolare, a parte i "border-radius" che ci danno la possibilità di creare dei cerchi in CSS, tipo questa roba qua per il "centro" dell'orologio:

    width: 24px;<br />    height: 24px;<br />    -moz-border-radius: 12px;<br />    -webkit-border-radius: 12px;<br />    border-radius: 12px;

(largezza 24, border-radius 12 = cerchio)

Bene, passiamo adesso ai numeri del quadrante:

.numbers {<br />    position: absolute;<br />    display:block;<br />    font-family: "Trebuchet MS";<br />    font-size: 32px;<br />}<br />#tre {<br />    top: 200px;<br />    right: 85px;<br />}<br />#sei {<br />    top: 330px;<br />    right: 215px;<br />}<br />#nove {<br />    top: 200px;<br />    left: 85px;<br />}<br />#dodici {<br />    top: 70px;<br />    right: 208px;<br />}

Qui abbiamo semplicemente una classe ".numbers" e poi posizioniamo i vari numeri (3, 6, 9 e 12) nel punto giusto. Niente di speciale, solo un posizionamento assoluto.

Iniziamo a vedere qualcosa di più interessante, il posizionamento delle "tacchette" per indicare i 5 minuti. Eccolo qua:

.cinqueminuti {<br />    position: absolute;<br />    width: 3px;<br />    height: 25px;<br />    top: 53px;<br />    left: 220px;<br />    background: #000;<br />    -webkit-transform-origin: 50% 170px;<br />    -moz-transform-origin: 50% 170px;<br />}<br />#five {<br />    -webkit-transform: rotate(30deg);<br />    -moz-transform: rotate(30deg);<br />}<br />#ten {<br />    -webkit-transform: rotate(60deg);<br />    -moz-transform: rotate(60deg);<br />}<br />#fifteen {<br />    -webkit-transform: rotate(90deg);<br />    -moz-transform: rotate(90deg);<br />}<br />#twenty {<br />    -webkit-transform: rotate(120deg);<br />    -moz-transform: rotate(120deg);<br />}<br />#twentyfive {<br />    -webkit-transform: rotate(150deg);<br />    -moz-transform: rotate(150deg);<br />}<br />#thirty {<br />    -webkit-transform: rotate(180deg);<br />    -moz-transform: rotate(180deg);<br />}<br />#thirtyfive {<br />    -webkit-transform: rotate(210deg);<br />    -moz-transform: rotate(210deg);<br />}<br />#fourty {<br />    -webkit-transform: rotate(240deg);<br />    -moz-transform: rotate(240deg);<br />}<br />#fourtyfive {<br />    -webkit-transform: rotate(270deg);<br />    -moz-transform: rotate(270deg);<br />}<br />#fifty {<br />    -webkit-transform: rotate(300deg);<br />    -moz-transform: rotate(300deg);<br />}<br />#fiftyfive {<br />    -webkit-transform: rotate(330deg);<br />    -moz-transform: rotate(330deg);<br />}<br />#sixty {<br />    -webkit-transform: rotate(0deg);<br />    -moz-transform: rotate(0deg);<br />}

Qui notiamo due cose interessanti:

transform-origin: 50% 170px;

che ci dice che le trasformazioni (nel nostro caso la rotazione) che si applicheranno a questo elemento avranno un centro che è spostato verso il basso di 170px rispetto alla posizione dove si trova il div.

Poi abbiamo 

transform: rotate(30deg)<br />transform: rotate(60deg)<br />...

che dice che ogni div deve essere ruotato di 30 gradi (per arrivare a 360 con 12 tacchette).

Passiamo ora alle lancette:

#minuti {<br />    position: absolute;<br />    width: 8px;<br />    height: 160px;<br />    top: 90px;<br />    left: 218px;<br />    -webkit-border-radius: 7px;<br />    -moz-border-radius: 5px;<br />    border-radius: 7px;<br />    background: black;<br />    -webkit-transform-origin: 50% 131px;<br />    -moz-transform-origin: 50% 131px;<br />}

#ore {<br />    position: absolute;<br />    width: 8px;<br />    height: 130px;<br />    top: 120px;<br />    left: 218px;<br />    -webkit-border-radius: 7px;<br />    -moz-border-radius: 5px;<br />    border-radius: 7px;<br />    background: #000;<br />    -webkit-transform-origin: 50% 100px;<br />    -moz-transform-origin: 50% 100px;<br />}

#secondi {<br />    position: absolute;<br />    width: 48px;<br />    height: 160px;<br />    top: 92px;<br />    left: 198px;<br />    -webkit-border-radius: 7px;<br />    -moz-border-radius: 5px;<br />    border-radius: 7px;<br />    background: transparent url(barbaradurso.png) no-repeat 50% 50%;<br />    -webkit-transform-origin: 50% 131px;<br />    -moz-transform-origin: 50% 131px;<br />}

Anche qui, più o meno, è la stessa cosa: le posizioniamo, diciamo qual è il punto di origine per la trasformazione, e in quella dei secondi mettiamo la nostra Barbara domenicale come sfondo.

E andiamo, il nostro CSS è pronto! Adesso passiamo al JavaScript: l'analisi di questo pezzo esula dall'articolo – che si concentra su un'applicazione concreta e simpatica delle trasformazioni in CSS – ma non c'è proprio niente di particolare: semplicemente una funziona che viene richiamata ogni secondo e aggiorna la rotazione delle varie lancette (ore, minuti, secondi) a seconda del momento:

$(document).ready(function() {<br />    var timer = setInterval("getTime()",1000);<br />});<br/>function getTime() {<br />    var d = new Date();<br />    var hours = d.getHours();<br />    var minute = d.getMinutes();<br />    var seconds = d.getSeconds();<br />    var hourRotate;<br />    var minRotate;<br />    var secRotate;<br/><br/>    hours = ((hours > 12) ? hours - 12 : hours);<br />    if (minute === 0)<br />    {<br />        minRotate = 0;<br />    }<br />    else<br />    {<br />        minRotate = minute*6;<br />    }<br/><br/>    if (seconds === 0)<br />    {<br />        secRotate = 0;<br />    }<br />    else<br />    {<br />        secRotate = seconds*6;<br />    }<br/><br/>    if (hours === 12)<br />    {<br />        hourRotate = 0;<br />    }<br />    else<br />    {<br />        hourRotate = (hours*30) + (minute/2) ;<br />    }<br/><br/>    var srotate = "rotate(" + secRotate + "deg)";<br />    $("#secondi").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});<br />    var hrotate = "rotate(" + hourRotate + "deg)";<br />    $("#ore").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});<br />    var mrotate = "rotate(" + minRotate + "deg)";<br />    $("#minuti").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});<br />}

E allora ecco qua il nostro orologio per delle Buonissime Domeniche – con una sopresina! 😀

Ecco qua il link alla pagina così potete scaricare il codice:
http://html5today.it/labs/cssclock/index.html

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis