文章圖片
文章圖片
上節課我們已經學習了關于HTML 2d相關的知識了 ， 這節課我們就進入3d的學習 。
1.HTML 3d轉換HTML 3d轉換包括3d移動、3d旋轉、3d呈現等內容 ， 與2d轉換有相通的地方 ， 大家也可以結合2d轉換一起記憶學習 。
2.HTML 3d轉換之3d移動與2d移動只能在x、y軸進行移動不同的是 ， 3d移動還可以在z軸進行移動 ， 主要有以下幾種書寫格式：
1）x、y、z軸分別移動的書寫方法：
x軸移動方法：transform: translateX(x軸方法移動的位置);其中向右移動為正 。
y軸移動方法：transform: translateY(Y軸方法移動的位置);其中向下移動為正 。
z軸移動方法：transform: translateY(z軸方法移動的位置);其中向前移動為正 。
2）x、y、z軸同時移動的書寫方法：
格式：transform: translate3d(x軸方法移動的位置y軸方法移動的位置z軸方法移動的位置);
3.HTML 3d轉換之3d透視為了更加突出3d效果 ， 我們就需要將上3d透視 ， 主要應用規則如下：
1）3d透視需要加在實現3d效果的父元素上：
2）主要格式：perspective: 像素值;像素越大 ， 圖像越小 。
如下圖 ， 我們將div盒子加上了3d效果 ， 那么3d透視需要加在div的父元素即body上 。
【教會|HTML3D轉換怎么使用？一分鐘教會你！】
相關經驗推薦
- NFC|節能環保品質好 三款優質高轉換效率電源推薦
- 腦機接口|蓋奇等人設計了一種更系統的腦機接口，將大鼠的神經元轉換為頻率不同的聲音
- 三星|傳統的腦機接口在將神經信號轉換為控制命令之前，需要先訓練解碼器
- 軟件|（第二節）抖音書單號最新教程，親手教會你當下書單玩法【純干貨】
- Win10|無需U盤！轉換“32位”為“64位”Win 10版本，還可保留用戶數據
- 供應鏈管理|節能環保又省錢！3款優質高轉換效率電源推薦
- |使用LM2588-ADJ的5V至雙12V升壓DC-DC轉換器
- 微軟|USB至+/-5V電壓DC-DC開關轉換器Max735
- 教會|一分鐘教會你uwsgi怎么配置
- 控制器|50V至5V@7A同步降壓（降壓）轉換器LM5116