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>

 

存在的問題：當鼠標移入後，迅速將鼠標移出，翻轉效果還會繼續，直到完成爲止。