Site icon Css3 Transition

Fancy Wrist Watch Using Css3 Transition and Transform Effect

css3 watch

Wrist is a bi-weekly illustrative exercise to explore typography, colors, clock mechanics, and everything else that goes into watch design. Starting with one of my watches, I will be illustrating existing watches as well as exploring new watch designs. I sadly only own two watches, so I’ll quickly be moving to the latter.

This is the clock we’ll create using HTML, CSS and a little JavaScript. We’ll use CSS animations or transitions for any movement, and rely on JavaScript to set the initial time and adding basic CSS transforms.

My initial approach was to use three elements for each of the hands. I then went back and wrapped each in a container element. While the simpler HTML worked as far as the basic CSS animations, we’ll need containing elements when we want to position the hands and animate them also.

HTML:-

CSS:-

JavaScript to set the initial time and adding basic CSS transforms

Exit mobile version