Exemple de démo d'animation CSS3 (feuilles de style en cascade HTML5), horloge tournant à l'envers en mode accéléré : 8/07/2017

Cette animation CSS simple affiche une horloge dont les aiguilles tournent dans le sens anti-horaire et où les nombres sont aussi dans le sens anti-horaire (juste pour mon côté décalé et pour se marrer!). Le timing est 20 fois plus rapide celui d'une horloge normale : l'aiguille des secondes fait un tour en 3s, celle des minutes en ... 180s (forcément) et celle des heures, 2160 secondes (soit 36mn normales). L'horloge démarre à 12h00.

L'objet horloge est un simple cadre avec des bords arrondis et pour laquelle on a appliqué un dégradé radial. Les nombres sont positionnés en calculant les coordonnées trigonométriques par rapport au centre (160,160). Quant aux aiguiles, ce sont des cadres ayant une faible hauteur et une grande largeur et auxquels on applique une animation CSS rotative (suivant Z) dont le cycle dure le temps qu'on a indiqué juste avant (3s, 180s et 2160s).

Il va de soit que ce script uniquement CSS peut être adapté pour se synchroniser avec un javascript donnant l'heure du système informatique ou via PHP! (suivant les chiffres de chaque unité on aplique un angle initial, sachant qu'ici en fait j'ai mis l'angle initial à 0 degré dans le système mathématique, c'est à dire à 3h15!!)).

Vous pouvez utiliser le code source (en affichant le source de la page et utilisant le fichier CSS.