css3 矩陣變化. 應用格式為:
transform: matrix(a,b,c,d,e,f);
對應於就是:
實際應用中的轉換就是:
其中:ax+cy+e = 橫座標
bx+dy+f = 縱座標
為什麼會多出 0 0 1呢？ 因為, 為了湊引數.
rdzspvwtranslate 矩陣
基本格式為:
transform: matrix(1, 0, 0, 1, x, y); // x 橫向平移, y 縱向平移
scale 矩陣
scale(縮放) 的矩陣也挺簡單.
// 將 x 軸縮放 a 倍
// 將 y 軸縮放 b 倍
matrix(a, 0, 0, b, 0,0);
當然, 如果你在最後兩位寫上數字, 代表著, 先縮放再平移.
// 得到: x 軸 = 0.3*x + 100
// 得到: y 軸 = 0.2*x + 200
matrix(0.3,0,0,0.2,100,200);
rotate 矩陣
rotate 實際上和三角函式有很大的關係. 首先,確定你的旋轉角(順時針旋轉). 然後, 計算 sinθ 和 cosθ. 最後的矩陣公式為www.cppcns.com:
matrix(cosθ,sinθ,-sinθ,cosθ,0,0) // 就是 cs-sc
skew 矩陣
skew(拉伸) 矩陣也是三角函式, 不過, 用到的是tanθ. 格式為:
// 將 y 軸向 x 軸傾斜 a°
// 將 x 軸向 y 軸傾斜 b°
matrix(1,tan(a),tan(b),1,0,0)
3d變換矩陣
3d 變換是 4*4 的矩陣. 他和 2d 類似,只是, 多出乙個z。 // 這是縮放的程式設計客棧3d矩陣
對應的 css 寫法為:
transform: matrix3d(sx, 0, 0, 0, 0, sy, 0, 0, 0, 0, sz, 0, 0, 0, 0, 1)
本文標題: css3 矩陣的使用詳解
本文位址: /web/css/85704.html
CSS3中REM使用詳解
在頁面中設定字型，我們知道有常見的兩種，px 和 em.在web頁面製作中，我們一般使用 px 來設定我們的文字，因為他比較穩定和精確。但是這種方法存在乙個問題，當使用者在瀏覽器中瀏覽我們製作的web頁面時，他改變了瀏覽器的字型大小 雖然一般人不會去改變瀏覽器字型大小 這時會使用我們的web頁面布局...
CSS3中REM使用詳解
在頁面中設定字型，我們知道有常見的兩種，px 和 em.在web頁面製作中，我們一般使用 px 來設定我們的文字，因為他比較穩定和精確。但是這種方法存在乙個問題，當使用者在瀏覽器中瀏覽我們製作的web頁面時，他改變了瀏覽器的字型大小 雖然一般人不會去改變瀏覽器字型大小 這時會使用我們的web頁面布局...
詳解CSS3漸變
漸變，指形狀或顏色的有規律性的變化，往往可以給人很強的節奏感和審美情趣，這裡研究的主要是顏色的漸變。漸變的形式在日常生活中很常見，在網頁中的用的也很多，傳統網頁技術中往往用來實現漸變，容易帶來載入負擔和動態定製的瓶頸。css3提供了實現漸變的屬性，隨著瀏覽器的逐步支援，研究css3漸變已勢在必行。涉...