先看效果，鼠標移上去看看。
back
front
1. 本實例需要以下元素
a. 容器BOX
b. 默認顯示元素FRONT
c. 翻轉顯示元素BACK
2. 容器BOX的Height為200px，Width為200px；
1 .box2{ 2 position: relative; 3 top: 20px; 4 left: 20px; 5 width: 200px; 6 height: 200px; 7 border: 1px solid #ccc; 8 overflow: hidden; 9 }
3. 默認顯示和翻轉顯示的元素Height為100%，Width為100%，Css中包含翻轉效果動畫代碼；
1 .front2{ 2 position: absolute; 3 top: 0px; 4 left: 0px; 5 width: 100%; 6 height: 100%; 7 background: #ff0000; 8 -webkit-transform: scaleX(1); 9 transform: scaleX(1); 10 -webkit-transition:1s 1s all ease; 11 transition:1s 1s all ease; 12 } 13 .back2{ 14 position: absolute; 15 top: 0px; 16 left: 0px; 17 width: 100%; 18 height: 100%; 19 background: #00ff00; 20 -webkit-transform: scaleX(0); 21 transform: scaleX(0); 22 -webkit-transition:1s all ease; 23 transition:1s all ease; 24 }
4. 增加鼠標移入效果；
1 .box2:hover .front2{ 2 -webkit-transform: scaleX(0); 3 transform: scaleX(0); 4 -webkit-transition:1s all ease; 5 transition:1s all ease; 6 } 7 .box2:hover .back2{ 8 -webkit-transform: scaleX(1); 9 transform: scaleX(1); 10 -webkit-transition:1s 1s all ease; 11 transition:1s 1s all ease; 12 }
5. HTML頁面內容；
1 <div class="box2"> 2 <div class="back2">back</div> 3 <div class="front2">front</div> 4 </div>
存在的問題：當鼠標移入后，迅速將鼠標移出，翻轉效果還會繼續，直到完成為止。