用css3和js實現3d旋轉的效果，主要使用到css3 transform中的一些屬性：perspective，rotate，translate。
下面主要介紹一些transform中的屬性的效果和作用：
1.transform-style:一般是塊級元素使用此屬性，使用了此屬性後的塊級元素會在保持3d效果，但是如果僅僅使用此屬性是不會看出3d特效的，必須和其他的屬性一起使用才能呈現出3d效果。
2.perspective：perspective（x px）屬性指定觀察者與z軸的距離，單位px。這樣會有透視效果。
3.rotatex,rotatey,rotatez:這三個屬性其實是乙個，指定元素沿x軸，y軸和z軸旋轉的角度，型別變形的一種效果，單位是deg（角度）。
4.translatex,translatey,translatez:指定該元素沿著x軸，y軸或者z軸平移的距離，可以為正值也可以為負值，單位是px；
3d旋轉效果的思路：
將6張分別設定transform的屬性，使之能在頁面上靜態的形成乙個正方體效果，然後使用js 動態地設定包裹整個正方體的div的transform的值，這樣就實現了3d旋轉效果的。
以下是部分**結構
1.html部分的div布局
class="imgbox">
class="top">div>
class="bottom">div>
class="left">div>
class="right">div>
class="front">div>
class="back">div>
div>
2.分別設定上下左右頂部和底部6個div塊的樣式
.imgbox
.imgbox
div.top
.bottom
.left
.right
.front
.back
window.onload=function
() setinterval(trans,500);//每隔0.5s呼叫trans函式
}
CSS3實現3D立體效果
css3實現3d效果 1.涉及到的幾個css3屬性 首先大家需要了解transform屬性，主要有平移 translate 縮放 scale 拉伸 skew 旋轉 rotate 這裡涉及到3d轉換的主要介紹旋轉。下面通過一組rotate效果直觀理解rotatex,rotatey,rotatez區別。...
CSS3實現3D盒子效果
近日，看到了css3中，設計動態立體盒子的例子，覺得比較新奇，所以研究了下，加以自己的拙見，設計了如圖所示的例子，拿來給大家分享 此圖為firefox下的截圖 這跟 3d盒子 的實現方式一樣，我的盒子也是以它為原型來設計的。整個盒子的html結構很簡單，如下 後下 左前上右 一，盒子定位 首先初始化...
CSS3動畫 3D旋轉
學了c3之後，簡單做了乙個3d旋轉的小demo.個人親猜測相容chrome firefox opera safari，沒有考慮ie。如果下面 有問題，可以在我的github檢視源 可以檢視網頁效果demo位址。如下 ccs3animation 3drotatetitle charset utf 8 ...