要實現類似3d轉動效果主要使用到css3的一些特性。
下面主要介紹一些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函式
}
css js實現3D盒子
話不多說，直接上 lang en charset utf 8 rel shortcut icon href fk.png css3d盒子title html box keyframes xuanzhuan 100 box div front back left right top bottom st...
3D製作魔方
從10號開始做這個東西，是一邊學習一邊做的，學了dxut框架 拾取技術 dx提供的 別人寫的演算法和用外接球模擬 先說一下還要改進的地方 1 無論先點哪乙個方塊，都按照程式設定的去轉 2 光照問題 轉了之後變暗 3 記憶體洩露 這個找了很久都沒找到，我估計是dxut框架的，汗 設計思路 1 渲染 設...
純CSS3 實現3D魔方
1 思路 父盒子給子盒子開啟立體空間，並開啟透視，設定視距 子盒子設定擺放位置，與我們畫的正方體類似，按照平面正方體每個面的拜訪位置，我們通過旋轉 平移達到擺放的效果 父盒子設定過渡 滑鼠懸停到父盒子，子盒子做出的行為，分別向各自的方向擴散，並且側面要有一定的旋轉，為90 使其達到我們想看到的開啟效...