3d轉換和2d轉換的最大區別就是,2d是二維座標系,是平面的,而3d是三維座標系,具有空間感、立體感。在3d轉換中,有兩個特別重要的屬性perspective、transform - style。
perspective:透視,也叫視距,就是人眼距離螢幕的距離。距離螢幕越近(透視越小)物體越大,距離螢幕越遠(透視越大)物體越小。
1.透視是寫在父級元素上的
2. 透視單位 :px
transform-style:3d呈現。該屬性是控制子元素是否開啟3d效果。預設是不開啟的,當屬形值為:preserve-3d,則開啟3d效果。
3d呈現寫在父級元素上,是控制子元素是否保留3d效果。
前後兩個盒子,hover時翻轉
好好學習
天天向上
主要就是3d轉換的應用
ok,轉換暫時結束到這裡。
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...
2D轉換 3D轉換
轉換是使元素改變形狀 尺寸和位置的一種效果。能夠對元素進行移動 縮放 轉動 拉長或拉伸。2d轉換 瀏覽器相容 1 internet explorer 10 firefox 以及 opera 支援 transform 屬性。2 chrome 和 safari 需要字首 webkit 3 interne...
3d轉換經驗分析
總結 旋轉的時候 如 rotatex 角度 tansform origin left center 或者 right center rotatey 角度 transform origin center top 或者 center bottom 1.面朝前 y軸左側旋轉 角度旋轉為負值 相當於面在前 ...