CSS3的transform屬性與矩陣Matrix

時間 2020-06-16

標籤 css3 css transform 屬性矩陣 matrix 欄目 CSS 简体版

原文原文鏈接

transform簡介

transform是CSS3中加入的控制元素變換的新屬性（其實早在2003年的SVG1.1標準中就已經成爲W3C標準，能夠做爲一個元素的屬性使用）,能夠用它實現元素的位移(translate)、縮放(scale)、旋轉(rotate)、扭曲(skew)。和transition屬性配合使用能夠實現各類酷炫的動畫效果。css

CSS提供了各類變換對應的屬性方法html

.trans_translate { transform: translate(10px, 20px); }
.trans_scale { transform: scale(1, 0.5); }
.trans_rotate { transform: rotate(45deg); }
.trans_skew { transform: skew(35deg); }

這樣的使用方式能夠讓使用者方便理解，使用起來更加容易。但事實上transform的實現遠不止看上去那麼簡單，transform的全部變換都是經過矩陣(matrix)來實現的node

矩陣變換

WEB中的矩陣變換有2D和3D兩種，本文主要描述matrix2d的狀況css3

二維圖形的變換可歸納爲上述四種形式，而這四種形式均可以化爲基本的矩陣運算：
git

縮放：scale(sx, sy) 等同於 matrix(sx, 0, 0, sy, 0, 0);
平移：translate(tx, ty) 等同於 matrix(1, 0, 0, 1, tx, ty);
旋轉：rotate(deg) 等同於 matrix(cos(deg), sin(deg), -sin(deg), cos(deg), 0, 0);
拉伸：skew(degx, degy) 等同於 matrix(1, tan(degy), tan(degx), 1, 0, 0);

縮放、旋轉變換都與參考點有關，上面進行的各類變換都是以原點爲參考點的。若是相對某個通常的參考點（_xf_，_yf_）做縮放、旋轉變換，至關於將該點移到座標原點處，而後進行縮放、旋轉變換，最後將（_xf_，_yf_）點移回原來的位置。切記複合變換時，先做用的變換矩陣在右端，後做用的變換矩陣在左端。github

參考資料

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。