Simple Animated Year Calendar Css3
--------------------------------------------DEMO---------------------------------------------------
--------------------------------------------CSS3---------------------------------------------------
body { font-family:"Helvetica Neue Bold", arial, helvetica, sans-serif; font-size:100%; margin:10px; color:#333; }
h1 { margin:0; font-weight:normal; }
time.icon { font-size:1em; display:block; position:relative; width:7em; height:7em; background-color:#fff; margin:0 auto; border-radius:0.6em;
box-shadow:0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd; overflow:hidden; -webkit-backface-visibility:hidden;
-webkit-transform:rotate(0deg) skewY(0deg); -webkit-transform-origin:50% 10%; transform-origin:50% 10%; }
time.icon * { display:block; width:100%; font-size:1em; font-weight:bold; font-style:normal; text-align:center; }
time.icon strong { position:absolute; top:0; padding:0.4em 0; color:#fff; background-color:#01c9fc; border-bottom:1px dashed #f37302; box-shadow:0 2px 0 #01c9fc; }
time.icon em { position:absolute; bottom:0.3em; color:#ff0000; }
time.icon span { width:100%; font-size:2.8em; letter-spacing:-0.05em; padding-top:0.8em; color:#2f2f2f; }
time.icon:hover, time.icon:focus { -webkit-animation:swing 0.6s ease-out; animation:swing 0.6s ease-out; }
@-webkit-keyframes swing { 0% { -webkit-transform:rotate(0deg) skewY(0deg); } 20% { -webkit-transform:rotate(12deg) skewY(4deg); }
60% { -webkit-transform:rotate(-9deg) skewY(-3deg); } 80% { -webkit-transform:rotate(6deg) skewY(-2deg); } 100% { -webkit-transform:rotate(0deg) skewY(0deg); } }
@keyframes swing { 0% { transform:rotate(0deg) skewY(0deg); } 20% { transform:rotate(30deg) skewY(4deg); } 60% { transform:rotate(-20deg) skewY(-3deg); }
80% { transform:rotate(10deg) skewY(-2deg); } 100% { transform:rotate(0deg) skewY(0deg); } }
--------------------------------------------HTML5---------------------------------------------------
<h2>Simple Animated Year Calendar Css3</h2>
<table width="300" border="0" cellspacing="0" cellpadding="10">
<tr>
<td><time datetime="2014-09-20" class="icon"><em>Saturday</em><strong>January</strong><span>20</span></time></td>
<td><time datetime="2014-09-20" class="icon"><em>Saturday</em><strong>February</strong><span>20</span></time></td>
<td><time datetime="2014-09-20" class="icon"><em>Saturday</em><strong>March</strong><span>20</span></time></td>
<td><time datetime="2014-09-20" class="icon"><em>Saturday</em><strong>April</strong><span>20</span></time></td>
</tr>
<tr>
<td><time datetime="2014-09-20" class="icon"><em>Saturday</em><strong>May</strong><span>20</span></time></td>
<td><time datetime="2014-09-20" class="icon"><em>Saturday</em><strong>June</strong><span>20</span></time></td>
<td><time datetime="2014-09-20" class="icon"><em>Saturday</em><strong>July</strong><span>20</span></time></td>
<td><time datetime="2014-09-20" class="icon"><em>Saturday</em><strong>August</strong><span>20</span></time></td>
</tr>
<tr>
<td><time datetime="2014-09-20" class="icon"><em>Saturday</em><strong>September</strong><span>20</span></time></td>
<td><time datetime="2014-09-20" class="icon"><em>Saturday</em><strong>October</strong><span>20</span></time></td>
<td><time datetime="2014-09-20" class="icon"><em>Saturday</em><strong>November</strong><span>20</span></time></td>
<td><time datetime="2014-09-20" class="icon"><em>Saturday</em><strong>December</strong><span>20</span></time></td>
</tr>
</table>
