先看效果，鼠标移上去看看。
back
front
1. 本实例需要以下元素
a. 容器BOX
b. 默认显示元素FRONT
c. 翻转显示元素BACK
2. 容器BOX的Height为200px，Width为200px；
.box2{
position: relative;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
border: 1px solid #ccc;
overflow: hidden;
}
3. 默认显示和翻转显示的元素Height为100%，Width为100%，Css中包含翻转效果动画代码；
.front2{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #ff0000;
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition:1s 1s all ease;
transition:1s 1s all ease;
}
.back2{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #00ff00;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition:1s all ease;
transition:1s all ease;
}
4. 增加鼠标移入效果；
.box2:hover .front2{
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition:1s all ease;
transition:1s all ease;
}
.box2:hover .back2{
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition:1s 1s all ease;
transition:1s 1s all ease;
}
5. HTML页面内容；
<div class="box2">
<div class="back2">back</div>
<div class="front2">front</div>
</div>
存在的问题：当鼠标移入后，迅速将鼠标移出，翻转效果还会继续，直到完成为止。