Make the child background fill the available space

Profile picture for Naveen
Naveen

After watching a tutorial I am trying to make a windows 8 like animation using css3. To show the problem I have set the background to red. I want to flip vertically the entire blue block instead of the text. I am asking only for top block.

enter image description here

enter image description here

Here's the code snippet for those red front and back:

<!-- language: lang-css --> 
 .front, .back {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;

      position: relative;
      display:block;
      background-color:red;
      top: 0;
      left: 0;
    }

Here is the complete fiddle

Update 3

It looks like what you are trying to ask is How to Mimic Windows 8 flip tiles using html, css, and javascript. I would recommend abstracting your question to focus on just those details instead of providing extra code. It has already been asked on Stack Overflow here.

Here are some additional resources:

Try to implement these and ask a more focused question if you get stuck.

Here's a working sample the relevant code from your question

HTML

<!-- language: lang-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

<!-- language: lang-css --> 
/*rotate entire block 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;
}

See jsFiddle