自从有了html5和css3，好多以前只能想想的华丽效果都可以上手实现了。3D 转换(个人认为3D变换更贴切^)就是其中之一。关于3D转换，可以阅读CSS3 3D transform变换，不过如此，文中对3D转换进行了形象、生动、详细的阐述。在这里，只和大家讨论怎么利用3D转换来实现立体及其旋转效果，例如：
好吧，废话不多说，上代码！
1.页面代码
1 <div class="translate3D_test"> 2 <ul class="cube"> 3 <li class="translate3D_li">1</li> 4 <li class="translate3D_li">2</li> 5 <li class="translate3D_li">3</li> 6 <li class="translate3D_li">4</li> 7 <li class="translate3D_li">5</li> 8 <li class="translate3D_li">6</li> 9 </ul> 10 <br/> 11 <a href="#" onclick="return clicka(11)">左</a> 12 <a href="#" onclick="return clicka(12)">右</a> 13 <a href="#" onclick="return clicka(13)">上</a> 14 <a href="#" onclick="return clicka(14)">下</a> 15 <a href="#" onclick="return clicka(1)">1</a> 16 <a href="#" onclick="return clicka(2)">2</a> 17 <a href="#" onclick="return clicka(3)">3</a> 18 <a href="#" onclick="return clicka(4)">4</a> 19 <a href="#" onclick="return clicka(5)">5</a> 20 <a href="#" onclick="return clicka(6)">6</a> 21 <a href="#" onclick="return clicka(0)">复原</a> 22 </div>
2.CSS代码
1 ul 2 { 3 list-style-type:none; 4 margin:0; 5 padding:0; 6 } 7 li 8 { 9 border:0; 10 } 11 .translate3D_test{ 12 position: relative; 13 width:500px; 14 height: 500px; 15 margin:auto; 16 background:#ddd; 17 } 18 19 .translate3D_li{ 20 background:#999; 21 font-size:50px; 22 border:1px solid #F15000; 23 }
3.JS代码
1 $(document).ready(function(){ 2 $(".cube").translate3D(400,0,0.5); 3 $("#notcube").translate3D(400,500,0.5); 4 }); 5 6 function clicka(who){ 7 switch(who) 8 { 9 case 0: 10 $(".cube").transform3D(0); 11 break; 12 case 1: 13 $(".cube").transform3D(1); 14 break; 15 case 2: 16 $(".cube").transform3D(2); 17 break; 18 case 3: 19 $(".cube").transform3D(3); 20 break; 21 case 4: 22 $(".cube").transform3D(4); 23 break; 24 case 5: 25 $(".cube").transform3D(5); 26 break; 27 case 6: 28 $(".cube").transform3D(6); 29 break; 30 case 11: // left 31 $(".cube").transform3D("left"); 32 break; 33 case 12: // right 34 $(".cube").transform3D("right"); 35 break; 36 case 13: // up 37 $(".cube").transform3D("up"); 38 break; 39 case 14: // down 40 $(".cube").transform3D("down"); 41 break; 42 default:break; 43 }; 44 return false; 45 } 46 47 function clickb(who){ 48 switch(who) 49 { 50 case 0: 51 $("#notcube").transform3D(0); 52 break; 53 case 1: 54 $("#notcube").transform3D(1); 55 break; 56 case 2: 57 $("#notcube").transform3D(2); 58 break; 59 case 3: 60 $("#notcube").transform3D(3); 61 break; 62 case 4: 63 $("#notcube").transform3D(4); 64 break; 65 case 11: // left 66 $("#notcube").transform3D("left"); 67 break; 68 case 12: // right 69 $("#notcube").transform3D("right"); 70 break; 71 case 13: // up 72 $("#notcube").transform3D("up"); 73 break; 74 default:break; 75 }; 76 return false; 77 } 78 79 /* 80 * translate3D 1.0 81 * Copyright (c) 2014 BowenLuo http://www.luobo.com/ 82 * Date: 2014-06-04 83 * 基于Html5和CSS3的立体旋转效果实现，支持循环旋转，支持指定面的显示 84 * Example: $(".cube").translate3D(400,0,0.5);//设置类为cube的元素立方体效果，400为长宽高，当第一个参数为0时为正方体效果，0.5为旋转时间，单位为s 85 * $("#notcube").translate3D(400,500,0.5);//设置ID为notcube的元素立方体效果，400为长宽，500为高，0.5为旋转时间，单位为s 86 * $(".cube").transform3D("left");//设置类为cube的立体元素向左旋转90° 87 * $("#notcube").transform3D(5);//设置ID为notcube的立体元素旋转后显示第5个面，即顶部界面 88 * 注意：1.插件需jquery支持,暂时只支持Chrome ，Safari ，Firefox 浏览器； 89 * 2.面元素和元素容器推荐使用div标签，并请确保至少有4个面元素(正方体效果支持6个面，柱体效果支持4个面)； 90 * 3.当不为正方体效果或面元素少于6个时，请不要使用上下旋转和显示第5、6个面，以确保良好的用户体验； 91 * 4.同一个页面可以设置多个标签的立体效果，但暂时只完美支持对一个立方体进行旋转操作； 92 * 5.在进行旋转动作之前，请设置元素的立体效果(在文档加载完成之后设置)。 93 */ 94 (function($){ 95 $.fn.translate3D = function(width,height,time){ 96 isCube = false; 97 if(height==0){ 98 isCube = true; 99 } 100 var thisEle=$(this); 101 if(isCube){ 102 $(thisEle).css({"width":width,"height":width,"overflow":"visible"}); 103 $(thisEle).children().css({"position": "absolute","width":width,"height":width}); 104 }else{ 105 $(thisEle).css({"width":width,"height":height,"overflow":"visible"}); 106 $(thisEle).children().css({"position": "absolute","width":width,"height":height}); 107 } 108 $(thisEle).css({"-webkit-transition":"-webkit-transform "+time+"s linear","-webkit-transform-style":"preserve-3d"}); 109 $(thisEle).css({"-moz-transition":"-moz-transform "+time+"s linear","-moz-transform-style":"preserve-3d"}); 110 $(thisEle).children().css({"-webkit-backface-visibility":"hidden","-moz-backface-visibility":"hidden"}); 111 var mcpara = width/2; 112 var translateZ1 = "translateZ("+mcpara+"px)"; 113 var translateZ2 = "rotateY(90deg) translateZ("+mcpara+"px)"; 114 var translateZ3 = "rotateY(180deg) translateZ("+mcpara+"px)"; 115 var translateZ4 = "rotateY(-90deg) translateZ("+mcpara+"px)"; 116 var translateZ5,translateZ6; 117 $(thisEle).children("*:eq(0)").css({"-webkit-transform":translateZ1}); 118 $(thisEle).children("*:eq(1)").css({"-webkit-transform":translateZ2}); 119 $(thisEle).children("*:eq(2)").css({"-webkit-transform":translateZ3}); 120 $(thisEle).children("*:eq(3)").css({"-webkit-transform":translateZ4}); 121 122 $(thisEle).children("*:eq(0)").css({"-moz-transform":translateZ1}); 123 $(thisEle).children("*:eq(1)").css({"-moz-transform":translateZ2}); 124 $(thisEle).children("*:eq(2)").css({"-moz-transform":translateZ3}); 125 $(thisEle).children("*:eq(3)").css({"-moz-transform":translateZ4}); 126 if(isCube){ 127 translateZ5 = "rotateX(90deg) translateZ("+mcpara+"px) " ; 128 translateZ6 = "rotateX(-90deg) translateZ("+mcpara+"px) "; 129 $(thisEle).children("*:gt(5)").css({"display":"none"}); 130 $(thisEle).children("*:eq(4)").css({"-webkit-transform":translateZ5}); 131 $(thisEle).children("*:eq(5)").css({"-webkit-transform":translateZ6}); 132 $(thisEle).children("*:eq(4)").css({"-moz-transform":translateZ5}); 133 $(thisEle).children("*:eq(5)").css({"-moz-transform":translateZ6}); 134 }else{ 135 $(thisEle).children("*:gt(3)").css({"display":"none"}); 136 } 137 }; 138 139 $.fn.transform3D = function(direction){ 140 if(typeof(yAngle)!=='number'){ 141 yAngle = 0; 142 } 143 if(typeof(xAngle)!=='number'){ 144 xAngle = 0; 145 } 146 var thisEle=$(this); 147 var basexAngle = Math.round((xAngle%360)/360)*360+(xAngle-xAngle%360); 148 /* 149 if(Math.abs(xAngle%360)>180){ 150 if(xAngle>0){ 151 basexAngle=xAngle-xAngle%360+360; 152 } 153 if(xAngle<0){ 154 basexAngle=xAngle-xAngle%360-360; 155 } 156 }else{ 157 basexAngle=xAngle-xAngle%360; 158 }*/ 159 if(typeof(direction)=='number'){ 160 161 switch(direction) 162 { 163 case 0: 164 xAngle = 0; 165 yAngle = 0; 166 break; 167 case 1: 168 xAngle = basexAngle; 169 if(Math.abs(yAngle%360)>180){ 170 if(yAngle>0){ 171 yAngle = yAngle-yAngle%360+360; 172 } 173 if(yAngle<0){ 174 yAngle = yAngle-yAngle%360-360; 175 } 176 177 }else{ 178 yAngle=yAngle-yAngle%360; 179 } 180 break; 181 case 2: 182 xAngle = basexAngle; 183 if(Math.abs(-yAngle%360-90)>180){ 184 if(yAngle>0){ 185 yAngle = yAngle-yAngle%360-90+360; 186 } 187 if(yAngle<0){ 188 yAngle = yAngle-yAngle%360-90-360; 189 } 190 191 }else{ 192 yAngle=yAngle-yAngle%360-90; 193 } 194 break; 195 case 3: 196 xAngle = basexAngle; 197 if(Math.abs(-yAngle%360-180)>180){ 198 if(yAngle>0){ 199 yAngle = yAngle-yAngle%360-180+360; 200 } 201 if(yAngle<0){ 202 yAngle = yAngle-yAngle%360-180-360; 203 } 204 205 }else{ 206 yAngle=yAngle-yAngle%360-180; 207 } 208 break; 209 case 4: 210 xAngle = basexAngle; 211 Math.abs(xAngle%360)/360 212 if(Math.abs(-yAngle%360+90)>180){ 213 if(yAngle>0){ 214 yAngle = yAngle-yAngle%360+90+360; 215 } 216 if(yAngle<0){ 217 yAngle = yAngle-yAngle%360+90-360; 218 } 219 }else{ 220 yAngle=yAngle-yAngle%360+90; 221 } 222 break; 223 case 5: 224 xAngle = basexAngle-90; 225 if(Math.abs(yAngle%360)>180){ 226 if(yAngle>0){ 227 yAngle = yAngle-yAngle%360+360; 228 } 229 if(yAngle<0){ 230 yAngle = yAngle-yAngle%360-360; 231 } 232 }else{ 233 yAngle=yAngle-yAngle%360; 234 } 235 break; 236 case 6: 237 xAngle = basexAngle+90; 238 if(Math.abs(yAngle%360)>180){ 239 if(yAngle>0){ 240 yAngle = yAngle-yAngle%360+360; 241 } 242 if(yAngle<0){ 243 yAngle = yAngle-yAngle%360-360; 244 } 245 246 }else{ 247 yAngle=yAngle-yAngle%360; 248 } 249 break; 250 default:break; 251 }; 252 } 253 if(direction=='left'){ 254 xAngle = basexAngle; 255 yAngle -= 90; 256 } 257 if(direction=='right'){ 258 xAngle = basexAngle; 259 yAngle += 90; 260 } 261 if(direction=='up'){ 262 if(xAngle%360==0){ 263 xAngle += 90; 264 }else{ 265 xAngle += 180; 266 } 267 if(Math.abs(yAngle%360)>180){ 268 if(yAngle>0){ 269 yAngle = yAngle-yAngle%360+360; 270 } 271 if(yAngle<0){ 272 yAngle = yAngle-yAngle%360-360; 273 } 274 }else{ 275 yAngle=yAngle-yAngle%360; 276 } 277 } 278 if(direction=='down'){ 279 if(xAngle%360==0){ 280 xAngle -= 90; 281 }else{ 282 xAngle -= 180; 283 } 284 if(Math.abs(yAngle%360)>180){ 285 if(yAngle>0){ 286 yAngle = yAngle-yAngle%360+360; 287 } 288 if(yAngle<0){ 289 yAngle = yAngle-yAngle%360-360; 290 } 291 }else{ 292 yAngle=yAngle-yAngle%360; 293 } 294 } 295 $(thisEle).css("transform","rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)"); 296 $(thisEle).css("webkitTransform","rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)"); 297 $(thisEle).css("-moz-Transform","rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)"); 298 }; 299 })(jQuery);