1.屬性介紹
perspective:800 平面距離三維中方框的距離
perspective-origin:50% 50% 表示從平面上哪個位置看三維圖 ，相當於是x軸和y軸，此時表示平面中心
2.transform屬性
--translete :位移操作
translatex(x px)
translatey(y px)
translatez(z px)
--rotate：旋轉操作
rotatex(x deg)
rotatey(y deg)
rotatez(z deg)
3.設定3d
transform-style:preserve-3d;
4.目前所有瀏覽器都不支援perspective屬性，只有-webkit-支援~
5.簡單的3d場景
座標系原點在左上角
x軸的正方向是向右
y軸正方向是向下
z軸正方向是從螢幕到人的眼睛(垂直)
比如rotatex(80deg)和rotatex(-80deg)區別就是：從x軸正方向看向物體，80deg就是順時針旋轉了80度，-80deg就是逆時針旋轉了80度
7.transform-origin:調整旋轉中心
x軸：left/center/right
y軸：top/center/bottom
z軸：length px
css3之3d動畫呈現
利用css3完成3d效果的簡單呈現 動畫效果用呈現不出來，大家自己動手寫乙個看看吧 新建html lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle head c...
CSS3動畫 3D旋轉
學了c3之後，簡單做了乙個3d旋轉的小demo.個人親猜測相容chrome firefox opera safari，沒有考慮ie。如果下面 有問題，可以在我的github檢視源 可以檢視網頁效果demo位址。如下 ccs3animation 3drotatetitle charset utf 8 ...
css3實踐 建立3D立方體
要想實現3d的效果，其實非常簡單，只需指定乙個元素為容器並設定transform style preserve 3d，那麼它的後代元素便會有3d效果。不過有很多需要注意的地方，這裡把我學習的方法，過程分享給大家。再講知識點之前，還是先弄清楚3d的座標系吧，從網上搜了一張經典座標系圖，供大家回顧一下。...