aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Los chicos de CSS Trick nos muestran un reloj formado por una estructura basa en <ul></ul> que nos permite mostrar un reloj de manillas que se moverán con Javascript (jQuery) y el uso de transformaciones CSS3.

// HTML
<ul id="clock">
   	<li id="sec"></li>
   	<li id="hour"></li>
	<li id="min"></li>
</ul>
// JS
$(document).ready(function() {

      setInterval( function() {
      var seconds = new Date().getSeconds();
      var sdegree = seconds * 6;
      var srotate = "rotate(" + sdegree + "deg)";

      $("#sec").css("-webkit-transform", srotate );

      }, 1000 );

      setInterval( function() {
      var hours = new Date().getHours();
      var mins = new Date().getMinutes();
      var hdegree = hours * 30 + (mins / 2);
      var hrotate = "rotate(" + hdegree + "deg)";

      $("#hour").css("-webkit-transform", hrotate );

      }, 1000 );

      setInterval( function() {
      var mins = new Date().getMinutes();
      var mdegree = mins * 6;
      var mrotate = "rotate(" + mdegree + "deg)";

      $("#min").css("-webkit-transform", mrotate );

      }, 1000 );

});

Si nos fijamos en el código Javascript, vemos que únicamente nos funcionará en navegadores basados en WebKit y es que lo que hacemos es aplicar el estilo -webkit-transform: rotate(); a los elementos que componen las manillas del reloj.