标签：
前段时间在极客学院的网站上看到了一个网页效果，就是鼠标移到某个块上，出现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。望各路大神观光指导。谢谢~
标签：
原文地址：http://www.cnblogs.com/redstonecmx/p/4394377.html
