As we all know that only few browsers supports CSS3 so this samples can be best viewed in Safari 4.x and Google Chrome.
This example the author uses plenty of CSS3 functions and feature.
It uses the CSS3 features, the
transition for the dynamic effects and
border-radius for the styling.
The author uses
transform:rotate feature of CSS 3 which lets you rotate elements. Transform will also allow you to scale, skew and translate (move) objects in your web page. All these can be animated by the Transition property complete with easing and duration.
The magic that rotates the clock’s hands comes via two WebKit specific CSS properties,
-webkit-transform. The transform property can alter the appearance of an element via a two dimensional transformation, for instance: scaling, rotating and skewing a DIV element. In this case it is used to rotate the clock hands to the correct angles.
This demo uses a webKit specific CSS3 properties the
-webkit-animation and the
This is basically like an ajax/loader spinner except its not a animated gif. It uses CSS3 to make it spin. This was thoroughly explained in this article in 24ways.
This is built using jQuery and CSS3.