在網頁上我們經常看到很多精美的3D特效，這篇筆記主要分享CSS3實現3D立方體旋轉效果。對於CSS旋轉特效基礎不是很熟悉的朋友可以先閱讀菠菜園部落格的文章《CSS3旋轉例項總結》。
使用方法：
1、呼叫CSS樣式：
2、新增HTML程式碼：
將<！——效果html開始——>……<！——效果html結束——>之間的html和js程式碼；放在
之間。CSS部分程式碼：
*{margin： 0；padding： 0；}html，body{height： 100%；background： black；}。wrap{ height： 100%；position： relative； -webkit-transform-style：preserve-3d； -webkit-perspective：0px； -moz-transform-style：preserve-3d； -moz-perspective：0px； -webkit-animation：mydhua 5s ease infinite； -moz-animation：mydhua 5s ease infinite；}。box{width： 200px；height： 200px；position： absolute；top： 50%；left： 50%； margin：-100px 0 0 -100px； line-height： 200px；text-align： center；font-size： 48px；color： white； }。box1{ -webkit-transform：rotatey（90deg） translatez（-100px）； -moz-transform：rotatey（90deg） translatez（-100px）； background： rgba（128，0，128，。5）；}。box2{ -webkit-transform：rotatey（90deg） translatez（100px）； -moz-transform：rotatey（90deg） translatez（100px）； background： rgba（255，0，255，。5）；}。box3{ -webkit-transform：rotatex（90deg） translatez（100px）； -moz-transform：rotatex（90deg） translatez（100px）； background： rgba（255，153，204，。5）；}。box4{ -webkit-transform：rotatex（90deg） translatez（-100px）； -moz-transform：rotatex（90deg） translatez（-100px）； background： rgba（0，204，255，。5）；}。box5{ -webkit-transform： translatez（-100px）； -moz-transform：translatez（-100px）； background： rgba（153，204，255，。5）；}。box6{ -webkit-transform： translatez（100px）； -moz-transform：translatez（100px）； background： rgba（0，255，255，。5）；}@-webkit-keyframes mydhua{ 0%{-webkit-transform：rotateX（0deg） rotateY（0deg） rotateZ（0deg）；-webkit-transform-origin： center center；} 100%{-webkit-transform：rotateX（180deg） rotateY（180deg） rotateZ（180deg）；-webkit-transform-origin： center center； }}@-moz-keyframes mydhua{ 0%{-moz-transform：rotateX（0deg） rotateY（0deg） rotateZ（0deg）；-webkit-transform-origin： center center；} 100%{-moz-transform：rotateX（180deg） rotateY（180deg） rotateZ（180deg）； -webkit-transform-origin： center center；}}
HTML部分程式碼：
關於CSS3旋轉特效總結一共分兩篇，更多內容可百度搜索“菠菜園”。內容比較簡單，主要幫助新手朋友快速入門，大神請飄過~
