CSS3+HTML5 effects-up and down sliding effect

First look at the effect, move the mouse up to see.

Back Front

1. This example requires the following elements:

A. Outer container box

B. Border of the content device

C. Default display content Front

D. Sliding content back

2. The height of the outer container box is 200px,width 200px;

. box1{
position:relative;
top:100px;
left:100px;
width:200px;
height:200px;
border:1px solid #ccc;
Overflow:hidden;
}

3. The height of the border of the content device is 200%,width for 100%,top-100%;

. border1{
Position:absolute;
Top:-100%;
left:0px;
width:100%;
height:200%;

Transform:translatey (0px);
-webkit-transition:1s all ease;
Transition:1s all ease;
}

4. Need to display 2 elements, height is 50%,width to 100%;

. front1{
width:100%;
height:50%;
Background: #ff0000;
}

. back1{
width:100%;
height:50%;
Background: #00ff00;
}


5. Add mouse to move into effect, the mouse moved in after the content of the device border down 50%, will slide content back display, the original content front sliding hide;


. Box1:hover. border1{
-webkit-transform:translatey (50%);
Transform:translatey (50%);
-webkit-transition:1s all ease;
Transition:1s all ease;
}

6. Page Content


<div class= "Box1" >
<div class= "Border1" >
<div class= "Back1" >back</div>
<div class= "Front1" >front</div>
</div>
</div>


Done.