Flat Clock

Flat Clock.markdown

Flat Clock

Flat Design Clock with CSS3 transition. JavaScript based on Gerwin van Royen clock. http://codepen.io/Gerwinnz/details/vokci

A Pen by Steven Fabre on CodePen.

License.

index.html

<h1>Flat Design Clock</h1>
<div class="clock-wrap">
  		<div class="hour-wrap">
				<div class="digit-top">
					<div class="front">00</div>
					<div class="back">00</div>
				</div>
				<div class="digit-bottom">
					<div class="front">00</div>
				</div>
			</div>
			<div class="min-wrap">
				<div class="digit-top">
					<div class="front">00</div>
					<div class="back">00</div>
				</div>
				<div class="digit-bottom">
					<div class="front">00</div>
				</div>
			</div>
      <div class="sec-wrap">
				<div class="digit-top">
					<div class="front">00</div>
					<div class="back">00</div>
				</div>
				<div class="digit-bottom">
					<div class="front">00</div>
				</div>
			</div>
		</div>
<a href="http://twitter.com/stevenfabre"m title="Twitter">@stevenfabre</a>
<a href="http://stevenfabre.com"m title="Twitter">stevenfabre.com</a>

script.js

Element.Properties.transform = {

  set: function(transform){
    var property = 'transform';
		console.log(Browser);
		if(Browser.chrome) property = 'WebkitTransform';
		if(Browser.firefox)  property = 'MozTransform';
		if(Browser.opera) property = 'OTransform';
		
		this.style[property] = transform;
		this.store('transform', transform);
	},

	get: function(){
		return this.retrieve('transform', '');
	}

};

Element.implement({

	setTransform: function(value){
		return this.set('transform', value);
	},

	getTransform: function(){
		return this.get('transform');
	}

});

$(window).addEvent('domready', function()
{
  var $hourWrap = $$('.hour-wrap');
	var $hourFront = $hourWrap.getElement('div.front');
	var $hourBack = $hourWrap.getElement('div.back')
	var $hourTop = $hourWrap.getElement('div.digit-top');
	var $hourBottom = $hourWrap.getElement('div.digit-bottom .front');

	var $minWrap = $$('.min-wrap');
	var $minFront = $minWrap.getElement('div.front');
	var $minBack = $minWrap.getElement('div.back');
	var $minTop = $minWrap.getElement('div.digit-top');
	var $minBottom = $minWrap.getElement('div.digit-bottom .front');
  
  
  var $secWrap = $$('.sec-wrap');
	var $secFront = $secWrap.getElement('div.front');
	var $secBack = $secWrap.getElement('div.back');
	var $secTop = $secWrap.getElement('div.digit-top');
	var $secBottom = $secWrap.getElement('div.digit-bottom .front');

	var currentHour = 0;
	var currentMin = 0;
  var currentSec = 0;

	var setClock = function()
	{
		var time = new Date();
		var hour = time.getHours();
		var min = time.getMinutes();
    var sec = time.getSeconds();

		if(currentHour != hour)
		{
			currentHour = hour;
			var hourText = hour < 10 ? '0'+hour : hour;

			// make el to sit behind the top digit
			var $newHourTop = new Element('div', {class: 'digit-top', html: $hourTop.get('html'), style: 'z-index:1;'})
			var $newHourFront = $newHourTop.getElement('div.front');
			var $newHourBack = $newHourTop.getElement('div.back');

			$newHourFront.set('text', hourText);
			$hourWrap.adopt($newHourTop);

			// start the animation
			$hourFront.setTransform('rotateX(180deg)');
			$hourBack.setTransform('rotateX(0deg)');
			$hourBack.setStyle('zIndex', 40);

			// set the min back
			$hourBack.set('text', hourText);

			(function()
			{
				$hourTop.destroy();
				$hourFront.destroy();
				$hourBack.destroy();

				$hourTop = $newHourTop;
				$hourFront = $newHourFront;
				$hourBack = $newHourBack;

				$hourTop.setStyle('zIndex', 10);
				$hourBottom.set('text', hourText);
			}).delay(800);
		}

		if(currentMin != min)
		{
			currentMin = min;
			var minText = min < 10 ? '0'+min : min;

			// make el to sit behind the top digit
			var $newMinTop = new Element('div', {class: 'digit-top', html: $minTop.get('html'), style: 'z-index:1;'})
			var $newMinFront = $newMinTop.getElement('div.front');
			var $newMinBack = $newMinTop.getElement('div.back');

			$newMinFront.set('text', minText);
			$minWrap.adopt($newMinTop);

			// start the animation
			$minFront.setTransform('rotateX(180deg)');
			$minBack.setTransform('rotateX(0deg)');
			$minBack.setStyle('zIndex', 40);

			// set the min back
			$minBack.set('text', minText);

			(function()
			{
				$minTop.destroy();
				$minFront.destroy();
				$minBack.destroy();

				$minTop = $newMinTop;
				$minFront = $newMinFront;
				$minBack = $newMinBack;

				$minTop.setStyle('zIndex', 10);
				$minBottom.set('text', minText);
			}).delay(800);
		}
    
    
    if(currentSec != sec)
		{
			currentSec = sec;
			var secText = sec < 10 ? '0'+sec : sec;

			// make el to sit behind the top digit
			var $newSecTop = new Element('div', {class: 'digit-top', html: $secTop.get('html'), style: 'z-index:1;'})
			var $newSecFront = $newSecTop.getElement('div.front');
			var $newSecBack = $newSecTop.getElement('div.back');

			$newSecFront.set('text', secText);
			$secWrap.adopt($newSecTop);

			// start the animation
			$secFront.setTransform('rotateX(180deg)');
			$secBack.setTransform('rotateX(0deg)');
			$secBack.setStyle('zIndex', 40);

			// set the min back
			$secBack.set('text', secText);

			(function()
			{
				$secTop.destroy();
				$secFront.destroy();
				$secBack.destroy();

				$secTop = $newSecTop;
				$secFront = $newSecFront;
				$secBack = $newSecBack;

				$secTop.setStyle('zIndex', 10);
				$secBottom.set('text', secText);
			}).delay(800);
		}

		//$hourEls.set('text', hour);
		
	}

	setClock.periodical(1000);
});

scripts

<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>

style.css

@import "compass/css3";

@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);

$green:#16a085;
$grey:#ededed;

body{
  padding:0px;
  margin:0px;
  background-color:$green;
  -webkit-font-smoothing: antialiased;
  text-align:center;
}

h1 {

  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight:300;
  font-size:40px;
  color:#ffffff;
  margin: 30px 0 0 0;
  text-align:center;
}

a {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color:#fff;
  text-decoration:none;
  display:block;
  margin:15px auto 0 auto;
  text-align:center;
}

.clock-wrap{
	width:610px;
  font-family: 'Pathway Gothic One', sans-serif;
	height:200px;
	margin:20px auto 30px auto;
	padding:15px;
}

.min-wrap,
.hour-wrap, .sec-wrap{
	width:200px;
	height:200px;
	
	float:left;
	position: relative;
}

.min-wrap, .sec-wrap{
	margin-left: 4px;
}


.digit-top, 
.digit-bottom{
	width:200px;
	height:100px;
	position: absolute;
}

.clock-wrap .front, .clock-wrap .back{
	width: 200px;
	height: 100px;
	position: absolute;
	overflow: hidden;
  background:#ffffff;
	color:$green;
	text-align: center;
	font-size: 150px;

	transition: transform 800ms, z-index 800ms;
	-moz-transition: -moz-transform 800ms, z-index 800ms;
	-webkit-transition: -webkit-transform 800ms, z-index 800ms;
	-o-transition: -o-transform 800ms, z-index 800ms;

	

	-webkit-transform-style: preserve-3d;
}

.clock-wrap .front{
	z-index: 30;
	

	transform-origin: 0px 100px;
	-webkit-transform-origin: 0px 100px;
	-moz-transform-origin: 0px 100px;
	-o-transform-origin: 0px 100px;

	transform: rotateX(0deg);
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg); 
	-o-transform: rotateX(0deg); 
    backface-visibility: hidden;
}

.clock-wrap .back{
	z-index: 20;
	top:100px;

	transform-origin: 0px 0;
	-webkit-transform-origin: 0px 0;
	-moz-transform-origin: 0px 0;
	-o-transform-origin: 0px 0;

	transform: rotateX(180deg);
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg); 
	-o-transform: rotateX(180deg);
    backface-visibility: hidden;

    line-height:0;
}


.digit-top{
	line-height:200px;
	top:0;
	z-index: 10;
  
}

.digit-bottom{
	top: 100px;
	line-height:0;
	z-index: 0;
  background:lighten($grey,20);
}


.hour-wrap:before, .min-wrap:before, .sec-wrap:before {
  content:"";
background:#000000;
  opacity:0.04;
  position:absolute;
  width:200px;
  height:100px;
  top:0;
  left:0;
  z-index:9999;
}