CSS3+HTML5特效2 - 翻转效果

先看效果，鼠标移上去看看。

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>

存在的问题：当鼠标移入后，迅速将鼠标移出，翻转效果还会继续，直到完成为止。