Propongo di seguito un interessante effetto in javascript e css3 che permette di creare un effetto di rotazione a qualsiasi contenuto.
La proprietà che utilizzeremo è transform: rotate(90deg) .
Di seguito una demo.
Ricordiamoci che non tutti i browser permettono l’utilizzo delle proprietà transform CSS3.
Quindi controlliamo che browser ha il client e impostiamo le proprietà di conseguenza.
Per farlo utilizziamo una funzione di jQuery che ci permette di sapere quale sia il browser in uso.
<br>var cssPrefix = "";<br>if ($.browser.mozilla){<br> cssPrefix = "moz";<br> } else if ($.browser.safari){<br> cssPrefix = "webkit";<br> } else if ($.browser.opera){<br> cssPrefix = "o";<br> } else if ($.browser.msie){<br> cssPrefix = "ms";<br> }<br>
Successivamente impostiamo un intervallo di tempo a 20 millisecondi che chiama una funzione che fa cambiare la posizione, rispetto l’originale, del nostro elemento.
<br>window.setInterval(function(){<br> if(cssPrefix) {<br> d += speed * dir;<br> }<br> rotate(cssPrefix, d);<br>}, 20);<br><br>function rotate(cssPrefix,d){<br> d += speed * dir;<br> $('#rays').css('-'+cssPrefix+'-transform','rotate('+d+'deg)');<br>}<br>
Ricordo che purtroppo questo scriptino non funzione su Internet Explorer in quanto non supporta la proprietà css transform.
Iscriviti al feed di Good2know