Reloj HTML con rotación CSS

Antes que nada debo advertirles que esto no funciona en ninguna versión de Internet Explorer, ni exploradores de versiones viejas, sin embargo se visualiza perfectamente en Chrome y Firefox. La idea es bien simple, y el resultado creo que es excelente.

El script incluye dos versiones una emulación analógica y otra digital con rotación, la estética es muy armónica en cualquiera de ellas, aunque, podemos realizar nuestro propio diseño, obviamente.

Las propiedades que se utilizan son de CSS3, con las etiquetas <div> e <img>, una vez colocadas donde queremos, utilizamos un

{ overflow: hidden } <div>

Esto para ocultar el resto de la imagen que no deseamos que se vea. Y por último, la propiedad de rotación, que es en sí, lo más novedoso y que podemos aplicarlo a lo que queramos, siempre y cuando no busquemos trabajar con Internet Explorer. La propiedad es la siguiente:

transform: rotate(42deg);             // no funciona aún
-moz-transform: rotate(42deg);        // mozilla specific
-o-transform: rotate(42deg);          // opera specific
-webkit-transform: rotate(42deg);     // webkit specific

En jQuery se vería de la siguiente forma:


$("#myElement").css({
    'transform': 'rotate(42deg)',
    '-moz-transform': 'rotate(42deg)',
    '-o-transform': 'rotate(42deg)',
    '-webkit-transform': 'rotate(42deg)'
});

Hay quienes gustan de crear el código desde 0, pero si desean pueden acceder al .js desde aquí. Según lo que explica el autor Jon Combe, se pueden rotar cosas en Internet Explorer también, como describen en el sitio de MSDN, pero no lo hacen desde el centro como con CSS3, sino desde top y left, lo que hace que el resultado no sea ideal.

Si desean ver la demo del reloj funcionando pueden hacerlo directamente desde el sitio de Jon Combe, y gracias a Webappers por compartir la información.

Categorizado en: