Windows 8 Flip Tile

by Kyle Mitofsky

HTML

<div class="demo-wrapper">
    <div class="dashboard clearfix">
        <div class="col1 clearfix flip-container vertical">
            <div class="big todos-thumb flipper" >
                <div class="front" >
                    <p>My Todos</p>
                </div>
                <div class="back" >
                    <p>You have 5 more tasks to do!</p>
                </div>
            </div>
        </div>
    </div>

CSS

.big,
.small {
  float: left;
  margin: 0 auto 1%;
  color: white;
  font-size: 2em;
  text-align: center;
  height: 4.5em;
  font-weight: 300;
  overflow: hidden;
  padding: .75em 1em;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out
}

.big {
  width: 100%
}



.demo-wrapper {
    width:500px;
}

.todos-thumb {
  background: #2FB1BE
}



/*rotate entire blook on hover over middle */
.vertical.flip-container:hover .flipper {
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: rotateX(-180deg);
}
/*re-rotate inner background text back to normal*/
.vertical.flip-container:hover .back {
    -webkit-transform: rotate(180deg);
    -webkit-transform: rotateX(180deg);
}
/*normally hide back*/
.vertical.flip-container .back {
    display:none;
}
/*hide front on flip */
.vertical.flip-container:hover .front {
    display:none;
}
/*show back on flip*/
.vertical.flip-container:hover .back {
    display:block;
}