先看看效果，把鼠標移上去看看。
back
front
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>
大功告成。