前段时间在极客学院的网站上看到了一个网页效果，就是鼠标移到某个块上，出现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 }
其中的图片使用的就是极客学院上的图片，在此说明一下。当然还引入了jquery。需要的朋友，可以将代码拷贝，同时一些js,css和图片文件的路径需要修改为自己对应的路径。
本人前端水平很一般，在此分享一些自己写过的小demo。望各路大神观光指导。谢谢~
时间： 2024-11-29 04:12:43