web前端之CSS3(3) 2D和3D轉換

2021-09-22 08:00:50 字數 1093 閱讀 1450

以下列出了所有的轉換屬性:

property

描述css

transform

適用於2d或3d轉換的元素

3transform-origin

允許您更改轉化元素位置

3d 轉換方法

函式描述

matrix3d(n,n,n,n,n,n,

n,n,n,n,n,n,n,n,n,n)

定義 3d 轉換,使用 16 個值的 4x4 轉換矩陣。

translate3d(x,y,z)

定義 3d 轉化。

translatex(x)

定義 3d 轉化,僅使用用於 x 軸的值。

translatey(y)

定義 3d 轉化,僅使用用於 y 軸的值。

translatez(z)

定義 3d 轉化,僅使用用於 z 軸的值。

scale3d(x,y,z)

定義 3d 縮放轉換。

scalex(x)

定義 3d 縮放轉換,通過給定乙個 x 軸的值。

scaley(y)

定義 3d 縮放轉換,通過給定乙個 y 軸的值。

scalez(z)

定義 3d 縮放轉換,通過給定乙個 z 軸的值。

rotate3d(x,y,z,angle)

定義 3d 旋轉。

rotatex(angle)

定義沿 x 軸的 3d 旋轉。

rotatey(angle)

定義沿 y 軸的 3d 旋轉。

rotatez(angle)

定義沿 z 軸的 3d 旋轉。

perspective(n)

定義 3d 轉換元素的透視檢視。

Web前端開發 CSS3之3D變換

2d變換僅是在電腦螢幕平面的變換,而3d變換則是空間三個方向的變換,可以是單個方向,也可以三個方向組合,3d變換用的也是transform屬性,不同的是rotate 要加上單個方向的軸系如rotatex 同時在3d變換時需要使用transform style屬性宣告使用的是 3d變換,為了讓視覺更好...

Web前端 css3 4 3D動畫

必須的兩個要素 1 動畫名 animation name 2 動畫的執行時間 animation duration 2s div hover定義動畫第一種 form.to.keyframes mingxuanbiangaole 最終結束 to 第二種 百分比 keyframes mingxuanbi...

web前端學習之CSS

書寫樣式和引入方法 css cascading style sheets 全程為層疊樣式表,它主要用於定義html內容在瀏覽器內的顯示樣式,如文字大小 顏色 加粗等等。使用css樣式的好處是通過定義某個樣式,可以讓不同的網頁位置有著統一的字型 字型大小或者顏色等等。換言之,使用css可以有效的減少我...