网页特效：3D翻转效果

浏览数：27 / 时间：2015年06月09日

　　前段时间在极客学院的网站上看到了一个网页效果，就是鼠标移到某个块上，出现3D翻转的效果显示背面的内容（http://www.jikexueyuan.com/，在页面的最后面）。对于前端也只是了解一些，当时还不知道这个效果怎么做的，于是查看了它的源码，发现用到了css3的一个属性backface-visibility，这个属性也要配合transform:rotateY来使用，如果将某个div或dom元素的backface-visibility设置为hidden时，表示的是当该div处于背面的时候是隐藏的，也就是需要配合transform:rotateY来使用，将transform:rotateY设置为transform:rotateY(180deg)或者transform:rotateY(-180deg)，这样这个div就是处于背面，这个时候这个div就会隐藏了。

　　做到像极客学院这样的翻转效果，其实还是很容易的，大概的思路就是同时定义两个div，采用绝对定位，position:absolute;设置相同的位置参数，总之就是两个div要处于同一位置，然后都将属性backface-visibility设置为hidden，要一开始就隐藏的那个div需要将transform属性设置为transform:rotateY(-180deg)，当然设置成180deg也是可以的。这样之后处于背面的div就会被隐藏。然后通过js添加鼠标mouseover的事件，将处于前面的div的transform属性改为transform:rotateY(-180deg)，处于背面的divtransform属性改为transform:rotateY(0deg)，这样处于前面的div变成了背面，处于背面的div又变成了前面，背面的div会隐藏，这样就做到了前面和背面div的切换。但是仅仅这样，效果看起来和生硬，没有过渡的效果。因此每个div需要加上transition属性，将transform设置为0.6s的过渡时间，当然你设置成其他时间也可以。这样翻转的效果就做好了。我上传至了新浪的SAE，可点击链接查看效果http://3doverturn.sinaapp.com/3Doverturn/。

　　源代码如下：

1.html代码

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>3D翻转效果</title>
  6 <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
  7 <link rel="stylesheet" type="text/css" href="css/index.css"/>
  8 </head>
  9 <script type="text/javascript">
 10     $(document).ready(function(){
 11 
 12         for(var i=0;i<10;i++){
 13             $("#overturn_td"+i).mouseover(function(){
 14 
 15                 var getid=this.id.substr(11);
 16                 //alert(getid);
 17                 $("#overturn_front"+getid).css({"-webkit-transform":"rotateY(-180deg)"});
 18                 $("#overturn_back"+getid).css({"-webkit-transform":"rotateY(0deg)"});
 19             });
 20             $("#overturn_td"+i).mouseleave(function(){
 21                 var getid=this.id.substr(11);
 22                 $("#overturn_front"+getid).css({"-webkit-transform":"rotateY(0deg)"});
 23                 $("#overturn_back"+getid).css({"-webkit-transform":"rotateY(-180deg)"});
 24             });
 25         }
 26         
 27 
 28     });
 29 </script>
 30 
 31 <body>
 32 
 33     <h2>3D翻转效果</h2>
 34     <h3>by Redstone</h3>
 35     <table>
 36         <tr>
 37             <td id="overturn_td0">
 38                 <div id="overturn_front0">
 39                     <img src="image/android.png" alt="Android开发">
 40                 </div>
 41                 <div id="overturn_back0">
 42                     <button>开始学习</button>
 43                 </div>
 44             </td>
 45             <td id="overturn_td1">
 46                 <div id="overturn_front1">
 47                     <img src="image/ios.png" alt="iOS开发">
 48                 </div>
 49                 <div id="overturn_back1">
 50                     <button>开始学习</button>
 51                 </div>
 52             </td>
 53             <td id="overturn_td2">
 54                 <div id="overturn_front2">
 55                     <img src="image/html.png" alt="html5开发">
 56                 </div>
 57                 <div id="overturn_back2">
 58                     <button>开始学习</button>
 59                 </div>
 60             </td>
 61             <td id="overturn_td3">
 62                 <div id="overturn_front3">
 63                     <img src="image/Cocos2d-x.png" alt="Cocos2d-x游戏开发">
 64                 </div>
 65                 <div id="overturn_back3">
 66                     <button>开始学习</button>
 67                 </div>
 68             </td>
 69             <td id="overturn_td4">
 70                 <div id="overturn_front4">
 71                     <img src="image/c.png" alt="C语言">
 72                 </div>
 73                 <div id="overturn_back4">
 74                     <button>开始学习</button>
 75                 </div>
 76             </td>
 77         </tr>
 78         <tr>
 79             <td id="overturn_td5">
 80                 <div id="overturn_front5">
 81                     <img src="image/Java.png" alt="Java语言">
 82                 </div>
 83                 <div id="overturn_back5">
 84                     <button>开始学习</button>
 85                 </div>
 86             </td>
 87             <td id="overturn_td6">
 88                 <div id="overturn_front6">
 89                     <img src="image/php.png" alt="php语言">
 90                 </div>
 91                 <div id="overturn_back6">
 92                     <button>开始学习</button>
 93                 </div>
 94             </td>
 95             <td id="overturn_td7">
 96                 <div id="overturn_front7">
 97                     <img src="image/swift.png" alt="Swift">
 98                 </div>
 99                 <div id="overturn_back7">
100                     <button>开始学习</button>
101                 </div>
102             </td>
103             <td id="overturn_td8">
104                 <div id="overturn_front8">
105                     <img src="image/bootstrap.png" alt="Bootstrap">
106                 </div>
107                 <div id="overturn_back8">
108                     <button>开始学习</button>
109                 </div>
110             </td>
111             <td id="overturn_td9">
112                 <div id="overturn_front9">
113                     <img src="image/unity3D.png" alt="Unity3D">
114                 </div>
115                 <div id="overturn_back9">
116                     <button>开始学习</button>
117                 </div>
118             </td>
119         </tr>
120     </table>
121 </body>
122 </html>

2.css代码

 1 body h2,h3{
 2     text-align: center;
 3     font-family: 微软雅黑;
 4 }
 5 #overturn_front0,#overturn_front1,#overturn_front2,#overturn_front3,#overturn_front4,
 6 #overturn_front5,#overturn_front6,#overturn_front7,#overturn_front8,#overturn_front9{
 7     height:200px;
 8     width:200px;
 9     /*-webkit-box-shadow:1px 1px 1px 1px rgba(20%,20%,40%,0.5);*/
10     -webkit-transition:-webkit-transform 0.6s;
11     position:absolute;
12     -webkit-backface-visibility:hidden;
13     z-index: 2;
14     -webkit-transform: rotateY(0deg);
15     top:0;
16 }
17 #overturn_back0,#overturn_back1,#overturn_back2,#overturn_back3,#overturn_back4,
18 #overturn_back5,#overturn_back6,#overturn_back7,#overturn_back8,#overturn_back9{
19     height:200px;
20     width:200px;
21     /*-webkit-box-shadow:1px 1px 1px 1px rgba(20%,20%,40%,0.5);*/
22     -webkit-transition:-webkit-transform 0.6s;
23     cursor: pointer;
24     background:#f5f5f5;
25     -webkit-backface-visibility:hidden;
26     position: absolute;
27     -webkit-transform: rotateY(-180deg);
28     top:0;
29 }
30 
31 table{
32     border-collapse:collapse;
33     border-spacing:0;
34     margin: auto;
35 }
36 table td{
37     height: 200px;
38     width: 200px;
39     border: 1px solid #E4E4E4;
40     position: relative;
41     padding: 0;
42     text-align: center;
43     line-height: 200px;
44 }
45 table td img{
46     width: 140px;
47     height: 140px;
48     margin-top: 30px;
49 }
50 
51 table td button{
52     border:none;
53     background: #35b558;
54     width: 140px;
55     height:36px;
56     cursor: pointer;
57     color: #FFFFFF;
58     font-family: 微软雅黑;
59     font-size: 16px;
60     -webkit-transition:background 0.8s;
61     margin-top: 82px;
62 }
63 
64 table td button:hover{
65     background: #35b57b;
66 }
67 #overturn_front{
68     height:200px;
69     width:200px;
70     -webkit-box-shadow:1px 1px 1px 1px rgba(20%,20%,40%,0.5);
71     -webkit-transition:-webkit-transform 0.6s;
72     cursor: pointer;
73     position:absolute;
74     -webkit-backface-visibility:hidden;
75     z-index: 2;
76     -webkit-transform: rotateY(0deg);
77 }
78 
79 #overturn_back{
80     height:200px;
81     width:200px;
82     -webkit-box-shadow:1px 1px 1px 1px rgba(20%,20%,40%,0.5);
83     -webkit-transition:-webkit-transform 0.6s;
84     cursor: pointer;
85     background:#f5f5f5;
86     -webkit-backface-visibility:hidden;
87     position: absolute;
88     -webkit-transform: rotateY(-180deg);
89 }