3D轉換 兩面翻轉盒子和3d導航欄

2021-10-04 06:52:15 字數 746 閱讀 7763

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軸左側旋轉 角度旋轉為負值 相當於面在前 ...