CSS3+HTML5特效2 - 翻转效果

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

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>

 

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