A Pen by Andreas Storm.

clock.markdown

clock

A Pen by Andreas Storm on CodePen.

License.

index.haml

.clock
  .center
  #seconds
  #minutes
  #hours

script.js

// js by http://codepen.io/m412c0/
(function() {
	var clockSeconds = document.getElementById('seconds'),
	clockMinutes = document.getElementById('minutes'),
	clockHours = document.getElementById('hours');
	function getTime() {
		var date = new Date(),
		seconds = date.getSeconds(),
		minutes = date.getMinutes(),
		hours = date.getHours(),
		degSeconds = seconds * 360 / 60,
		degMinutes = (minutes + seconds / 60) * 360 / 60,
		degHours = (hours + minutes / 60 + seconds / 60 / 60) * 360 / 12;
		clockSeconds.setAttribute('style', '-webkit-transform: rotate(' + degSeconds + 'deg); -moz-transform: rotate(' + degSeconds + 'deg); -ms-transform: rotate(' + degSeconds + 'deg); -o-transform: rotate(' + degSeconds + 'deg); transform: rotate(' + degSeconds + 'deg);');
		clockMinutes.setAttribute('style', '-webkit-transform: rotate(' + degMinutes + 'deg); -moz-transform: rotate(' + degMinutes + 'deg); -ms-transform: rotate(' + degMinutes + 'deg); -o-transform: rotate(' + degMinutes + 'deg); transform: rotate(' + degMinutes + 'deg);');
		clockHours.setAttribute('style', '-webkit-transform: rotate(' + degHours + 'deg); -moz-transform: rotate(' + degHours + 'deg); -ms-transform: rotate(' + degHours + 'deg); -o-transform: rotate(' + degHours + 'deg); transform: rotate(' + degHours + 'deg);');
	}
	setInterval(getTime, 1000);
	getTime();
} ());

style.sass

@import "compass"
body
  background: #181818

.clock
  position: absolute
  background: #131313
  border-radius: 5%
  height: 220px
  width: 220px
  left: 50%
  top: 50%
  margin: -110px 0 0 -110px
  div
    left: 50%
    position: absolute
    top: 50%

.center
  background: #131313
  border-radius: 50%
  height: 10px
  border: 3px solid #ccc
  margin: -8px 0 0 -8px
  width: 10px
  z-index: 4

#seconds
  background: #ccc
  height: 80px
  margin: -60px 0 0 -1px
  transform-origin: 1px 60px
  transform: rotate(0deg)
  width: 2px
  z-index: 3

#minutes
  background: #222
  height: 50px
  margin: -50px 0 0 -2px
  transform-origin: 2px 50px
  transform: rotate(0deg)
  width: 3px
  z-index: 2

#hours
  background: #333
  height: 40px
  margin: -40px 0 0 -3px
  transform-origin: 3px 40px
  transform: rotate(0deg)
  width: 6px
  border-radius: 3px
  z-index: 1