3D-CSS-clock.markdown

3D CSS clock

A Pen by Virgil Pana on CodePen.

License.

index.html

<link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>


<div id="info">
	<p>3D CSS Clock concept by Virgil Pana</p>
<p class="i2">    Follow me on <a href="https://dribbble.com/virgilpana" style="color:#ea4c89" target="_blank">Dribbble</a> | <a style="color:#2aa9e0" href="https://twitter.com/virgil_pana" target="_blank">Twitter</a></p>
</div>
<a id="view-code" href="http://codepen.io/virgilpana/pen/aObdPv/" target="_blank">VIEW CODE</a>

<div id="clock">
  <div class="digit">  
    <div class="cube-wrapper">  
      <div class="cube">
          <div class="f1">
              <span>1</span>
          </div>
          <div class="f2">
              <span>2</span>
          </div>
      </div>
   </div>
  </div>
  <div class="digit">  
    <div class="cube-wrapper">  
      <div class="cube">
          <div class="f1">
              <span>4</span>
          </div>
          <div class="f2">
              <span>5</span>
          </div>
      </div>
   </div>
  </div>
  <div class="separator">
    <div class="x"></div>
    <div class="y"></div>
  </div>
  <div class="digit">  
    <div class="cube-wrapper">  
      <div class="cube">
          <div class="f1">
              <span>4</span>
          </div>
          <div class="f2">
              <span>5</span>
          </div>
      </div>
   </div>
  </div>
  <div class="digit">  
    <div class="cube-wrapper">  
      <div class="cube">
          <div class="f1">
              <span>7</span>
          </div>
          <div class="f2">
              <span>8</span>
          </div>
      </div>
   </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

script.js

    var digits = $("div.cube") ;   	  
  	var interval = 1000;
		var delay = 800;
    var digit1 = parseInt($(digits).eq(2).find(".f2 span")[0].innerHTML);      
    var digit2 = parseInt($(digits).eq(3).find(".f2 span")[0].innerHTML);          		
		var digit3 = parseInt($(digits).eq(1).find(".f2 span")[0].innerHTML);          		
    
  
    setInterval(function(){
			
        
        $(digits).eq(3).addClass("flip");                      
        setTimeout(function(){            
            $(digits).eq(3).find(".f1 span")[0].innerHTML = digit2;
            if(digit2 == 9){
            	digit2 = -1;
            }
            $(digits).eq(3).find(".f2 span")[0].innerHTML = ++digit2;
            $(digits).eq(3).removeClass("flip");  
            
         }, interval/2);                                                            
     
      
      	if(digit2 == 9){
            
          if(digit1 == 0){
						
            setTimeout(function(){
              $(digits).eq(1).addClass("flip");                      
               setTimeout(function(){            
                  $(digits).eq(1).find(".f1 span")[0].innerHTML = digit3;
                  if(digit3 == 5){
                    digit3 = -1;
                  }
                  $(digits).eq(1).find(".f2 span")[0].innerHTML = ++digit3;
                  $(digits).eq(1).removeClass("flip");              
           		 }, delay);             
               }, interval/2);
          }
          
          
            setTimeout(function(){   

              $(digits).eq(2).addClass("flip");                      
               setTimeout(function(){            
                  $(digits).eq(2).find(".f1 span")[0].innerHTML = digit1;
                  if(digit1 == 5){
                    digit1 = -1;
                  }
                  $(digits).eq(2).find(".f2 span")[0].innerHTML = ++digit1;
                  $(digits).eq(2).removeClass("flip");  

               }, interval/2);     

            }, delay); 
        }
      
      
      }, interval);

style.less

@cube-width: 80px;
@cube-height: 124px;

/* General reset and body */
* { margin: 0px; padding: 0px; }
body {   
  padding-top:80px; 
  background:#3f4157;
	font-family: "Roboto", sans-serif; 
}
#view-code{
  color:#989ab0;      
  font-size:14px;
  text-transform:uppercase;
  font-family: "Open Sans", sans-serif; 
  font-weight:700;
  text-decoration:none;
  position:absolute;top:450px;
  left:50%;margin-left:-30px;
  z-index:200;
}
#view-code:hover{color:#fff}
p{
  font-family: "Open Sans", sans-serif; 
  color:#fff;
  text-align:center;
  padding-top:30px;
  color:#989ab0;
  font-size:17px;
}
p.i2{padding-top:6px;}
a{
  text-decoration:none;
  font-weight:bold;
  opacity:0.6;
  .transition(all 450ms ease);	 
}
a:hover{
  opacity:1;
  .transition(all 450ms ease);	 
}

#info{
   opacity:0.2; 
  .transition(all 450ms ease);	 
}
#info:hover{
   opacity:1; 
  .transition(all 450ms ease);	 
}

/* 3D Clock */
#clock{  
  padding-top:70px;
  width:395px;
  margin:0 auto;
}
.digit{
   width: 90px;
   height: 139px;
   float: left;
   overflow:hidden;
}
.cube-wrapper{
  background:#21222d;
  width: 1500px;  
 	height: 500px;
  float:left;
  .perspective(500px);  
  padding-top:320px;
  position:relative;
  top: -308px;
  left: -705px;
}
.cube {
	  width: @cube-width;  
  	height: @cube-height;
    .transform-style(preserve-3d);	  
}
.cube.flip {
  .transition(all 450ms ease);	  
}
.f1, .f2 {
  	height: @cube-height;
}
.f1 {
	  .translateZ(@cube-height/2);
}

.f2 {
	  .transform(rotateX(90deg) translateZ(@cube-height*1.5));
}

.cube.flip {
	  .rotateX(-89deg);
}

.cube {
	  text-align: center;
  	margin: 0 auto;
}

.f1, .f2 {  
  background:#3f4157;
  color:#fff;
  font-size:130px;
  font-weight:300;
  color: #fff;
  line-height: @cube-height;
  
}

.cube.flip .f1 {
  background: darken(#3f4157, 12%);
  .transition(all 250ms ease);	  
}
.cube.flip .f2 {
  background: darken(#3f4157, 0%);
  .transition(all 250ms ease);
}

.f2 {
  background: darken(#3f4157, 12%);

}
.separator{
  float:left;
  width:30px;
  padding-top:46px;
  text-align:center;
}
.separator .x, .separator .y{
  background:#fff;
  width:12px;
  height:12px;
  border-radius:2px;
  margin:0 auto;
}
.separator .y{
  margin-top:22px;
}