How To Create A Weekly Agenda Styled With CSS Using The Rotate Transform And Transition Properties

As I learn more about what can be done with coding, the more fun it becomes. With this project I decided to create a weekly agenda with HTML and CSS that used the rotate transform and transition properties of CSS3. These specific functions are used to spin and show a larger block with text upon mouseover. More specifically, when you hover your mouse over a day of the week, the small tile will rotate 180 degrees and show the information on the back within a larger tile.

*For now, I still have some bugs to work out and this agenda does not work correctly in Safari, but it does work great in Chrome and Firefox.

The Demo:

My Weekly Agenda
Su Any given Sunday!	Mo ...Back to work.	Tu It's Tuesday? Good. -Grumpy Cat	We Hump Day!	Tr It's almost Friday!	Fr It'sss Fridayyyyy!	Sa The weekend is here!

Below I have the HTML and CSS code for this project. If you're new to coding and are unsure where to start, check out this tutorial to help get you started: How To Create A Simple HTML Table. Also, feel free to use the code below to adapt it and make it better! And don't forget to leave a comment below!

HTML:

<table align="center" class="tablemain">

<tr>

<td ></td>

<tr>
<th colspan="7" class="thmain">My Weekly Agenda</th>
</tr>

<td class="tdmain">
<div class="calndrmain">
<div class="calndr">
<div class="side">Su</div>
<div class="side back">Any given Sunday!</div>
</div>
</div>
</td>

<td class="tdmain">
<div class="calndrmain">
<div class="calndr">
<div class="side">Mo</div>
<div class="side back">...Back to work.</div>
</div>
</div>
</td>

<td class="tdmain">
<div class="calndrmain">
<div class="calndr">
<div class="side">Tu</div>
<div class="side back">It's Tuesday? Good. <br> -Grumpy Cat</div>
</div>
</div>
</td>

<td class="tdmain">
<div class="calndrmain">
<div class="calndr">
<div class="side">We</div>
<div class="side back">Hump Day!</div>
</div>
</div>
</td>

<td class="tdmain">
<div class="calndrmain">
<div class="calndr">
<div class="side">Tr</div>
<div class="side back">It's almost Friday!</div>
</div>
</div>
</td>

<td class="tdmain">
<div class="calndrmain">
<div class="calndr">
<div class="side">Fr</div>
<div class="side back">It'sss Fridayyyyy!</div>
</div>
</div>
</td>

<td class="tdmain">
<div class="calndrmain">
<div class="calndr">
<div class="side">Sa</div>
<div class="side back">The weekend is here!</div>
</div>
</div>
</td>

</tr>

</table>

CSS:

<style>

.calndrmain {

cursor: pointer;
height: 60px;
perspective: 500;
position: relative;
width: 60px;

}

.calndr {

height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
width: 100%;

}

.calndr:hover {

transform: rotateY(180deg);

}

.calndr .side {

-webkit-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;
color: #273d51;
background: rgb(255,214,163); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,214,163,1) 0%, rgba(255,181,88,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,214,163,1)), color-stop(100%,rgba(255,181,88,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,214,163,1) 0%,rgba(255,181,88,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,214,163,1) 0%,rgba(255,181,88,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,214,163,1) 0%,rgba(255,181,88,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,214,163,1) 0%,rgba(255,181,88,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd6a3', endColorstr='#ffb558',GradientType=0 ); /* IE6-9 */
backface-visibility: hidden;
height: 100%;
position: absolute;
overflow: hidden;
width: 100%;
text-align:center;
line-height: 60px;

}

.calndr .back {

background: #ffd6a3;
color: #273d51;
width:100px;
height:100px;
padding:5px;
line-height:20px;
text-align: center;
transform: rotateY(180deg);

}

.tdmain {

background: rgb(255,145,6); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,145,6,1) 0%, rgba(255,181,88,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,145,6,1)), color-stop(100%,rgba(255,181,88,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,145,6,1) 0%,rgba(255,181,88,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,145,6,1) 0%,rgba(255,181,88,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,145,6,1) 0%,rgba(255,181,88,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,145,6,1) 0%,rgba(255,181,88,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9106', endColorstr='#ffb558',GradientType=0 ); /* IE6-9 */

}

.thmain {

-webkit-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
color: #273d51;
background: rgb(255,214,163); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,214,163,1) 0%, rgba(255,145,6,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,214,163,1)), color-stop(100%,rgba(255,145,6,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,214,163,1) 0%,rgba(255,145,6,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,214,163,1) 0%,rgba(255,145,6,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,214,163,1) 0%,rgba(255,145,6,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,214,163,1) 0%,rgba(255,145,6,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd6a3', endColorstr='#ff9106',GradientType=0 ); /* IE6-9 */
padding:10px;

}

.tablemain {

border-collapse:collapse;

}

</style>