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.
AngelFQC
15 años ago
Muy bueno!
si todos NO usaramos IE….
Pablo
15 años ago
@Angel: Ese es un sueño que me encantaria vivir jajajajajaja. Otra que John Lennon 😛
Jon Combe
15 años ago
Thanks for the link 🙂
Kush Kalwani
14 años ago
i wanna do it frm my clg time… n finally i hv dn it…thanks a lot… u made it possible 🙂