CSS3實現的3D旋轉代碼實例:本章節通過代碼實例介紹一下CSS3實現的3D旋轉效果，css3的出現可以設置更為強大的效果，3D運動效果就是其中的常用效果之一，下麵就是一個這樣的代碼實例，希望能夠給需要的朋友帶來一定的參考意義。代碼如下:螞蟻部落 螞蟻部落一 ...
CSS3實現的3D旋轉代碼實例:
本章節通過代碼實例介紹一下CSS3實現的3D旋轉效果，css3的出現可以設置更為強大的效果，3D運動效果就是其中的常用效果之一，下麵就是一個這樣的代碼實例，希望能夠給需要的朋友帶來一定的參考意義。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body, div, ul, li{ padding:0; margin:0; } .container ul li{ height:180px; width:180px; margin-right:20px; margin-bottom:20px; display:inline; -webkit-perspective:1000px; -moz-perspective:1000px; float:left; } .out_box{ position:relative; height:180px; width:180px; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; transition:0.5s; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; backface-visibility:hidden; } .out_box div{ display:block; height:180px; width:180px; position:absolute; left:0; top:0; background:#060; text-align:center; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; backface-visibility:hidden; color:#FFF; line-height:180px; font-size:16px; } .out_box .front_box { z-index: 2; } .out_box .back_box { z-index: 1; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .container ul li:hover .out_box{ -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); transform:rotateY(180deg); } .container ul li:hover .back_box{ z-index:3; } </style> </head> <body> <div class="container"> <ul> <li> <div class="out_box"> <div class="front_box">螞蟻部落一</div> <div class="back_box">螞蟻部落二</div> </div> </li> <li> <div class="out_box"> <div class="front_box">螞蟻部落一</div> <div class="back_box">螞蟻部落二</div> </div> </li> <li> <div class="out_box"> <div class="front_box">螞蟻部落一</div> <div class="back_box">螞蟻部落二</div> </div> </li> </ul> </div> </body> </html>
以上代碼實現了簡單的3D旋轉效果，具體如何實現這裡就不多介紹了，可以參閱本版塊相關的章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13155
更多內容可以參閱:http://www.softwhy.com/divcss/
