先看效果，鼠标移上去看看。
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>
存在的问题：当鼠标移入后，迅速将鼠标移出，翻转效果还会继续，直到完成为止。