web前端之CSS3（3）：2D和3D轉換

CSS3 轉換可以可以對元素進行移動、縮放、轉動、拉長或拉伸。

2D 轉換

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

Property 描述 CSS

transform 适用于2D或3D轉換的元素 3

transform-origin 允許您更改轉化元素位置 3

transform屬性2D變換方法：

translate()：根據左(X軸)和頂部(Y軸)位置給定的參數，從目前元素位置移動。transform: translate(50px,100px);/ 标準文法 /

rotate()：在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。;transform: rotate(30deg);/ 标準文法 /

scale()：用于增加或縮小元素的大小。transform: scale(2,3); / 标準文法 /

skew()：文法——transform:skew( [,]);  

包含兩個參數值，分别表示X軸和Y軸傾斜的角度，如果第二個參數為空，則預設為0，參數為負表示向相反方向傾斜。skewX();表示隻在X軸(水準方向)傾斜。skewY();表示隻在Y軸(垂直方向)傾斜。

matrix()：有六個參數，包含旋轉

aitingivf.com

，縮放，移動（平移）和傾斜功能。代表了一個3*3的矩陣（線性代數）——變換矩陣，通過變換矩陣和點坐标（x,y）的乘積得出新坐标（x1,y1）。