A Pen by Virgil Pana on CodePen.
Created
April 24, 2015 09:04
-
-
Save anonymous/872077ed2147b281931b to your computer and use it in GitHub Desktop.
3D CSS clock
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment