先看看效果，把鼠标移上去看看。
1. 本实例需要以下元素：
a. 外容器 box
b. 内容器 border
c. 默认显示内容 front
d. 滑动内容 back
2. 外容器BOX的Height为200px，Width为200px；
1 .box1{ 2 position: relative; 3 top: 100px; 4 left: 100px; 5 width: 200px; 6 height: 200px; 7 border: 1px solid #ccc; 8 overflow: hidden; 9 }
3. 内容器BORDER的Height为200%，Width为100%，Top为-100%；
1 .border1{ 2 position: absolute; 3 top: -100%; 4 left: 0px; 5 width: 100%; 6 height: 200%; 7 -webkit-transform: translateY(0px); 8 transform: translateY(0px); 9 -webkit-transition:1s all ease; 10 transition:1s all ease; 11 }
4. 需要显示的2个元素，Height为50%，Width为100%；
1 .front1{ 2 width: 100%; 3 height: 50%; 4 background: #ff0000; 5 } 6 7 .back1{ 8 width: 100%; 9 height: 50%; 10 background: #00ff00; 11 }
5. 加入鼠标移入效果，鼠标移入后内容器BORDER向下移动50%，就将滑动内容BACK显示出来，将原内容FRONT滑动隐藏；
1 .box1:hover .border1{ 2 -webkit-transform: translateY(50%); 3 transform: translateY(50%); 4 -webkit-transition:1s all ease; 5 transition:1s all ease; 6 }
6. 页面内容
1 <div class="box1"> 2 <div class="border1"> 3 <div class="back1">back</div> 4 <div class="front1">front</div> 5 </div> 6 </div>
大功告成。
原文：http://www.cnblogs.com/z-gia/p/3526202.html