幾個簡單的transform效果筆記

transform 是最重要的css3網頁效果之一

關於transform 有很多使用方法 那麼 讓我們看一下一些transform效果

Transform字面上就是變形，改變的意思。在CSS3中transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。

1 旋轉 rotate

rotate 是一個2d旋轉效果 首先 我們要有 transform-origin 的定義

transform-origin 指定了旋轉的基點 即圍繞著那一點進行旋轉 這個方法應用在2d以及3d轉換中 在2d轉換中這個方法接受兩個值 為x y 軸 在3d轉換方法中 這個方法接受三個值 即x y

z 軸 這個方法三個值以百分數形式出現 默認值為 50% 50% 0

調用格式為 transform-origin: x y z

rotate()方法接收旋轉所需的角度 正表示順時針 負則表示逆時針

2 移動 translate

移動相對簡單 本身的translate方法 只接受兩個值 即 x軸位移量以及 y軸位移量

當然 我們還有衍生出來的translateX() transformY() 等兩種方法

3 縮放 scale

縮放基數為1 事實上 我們也可以指定 縮放的基準點位置 也存在scaleX() scaleY()

兩種方法

4 扭曲 skew

X軸Y軸上的skew transformation（斜切變換）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值為0，也就是Y軸方向上無斜切。skew是用來對元素進行扭曲變行，第一個參數是水平方向扭曲角度，第二個參數是垂直方向扭曲角度。其中第二個參數是可選參數，如果沒有設置第二個參數，那麼Y軸為0deg。同樣是以元素中心為基點，我們也可以通過transform-origin來改變元素的基點位置。如：transform:skew(30deg,10deg):

5 矩陣變形 matrix()

以一個六個參數的變換矩陣來定義變換 令人頭禿........................