CSS3中的2D變形

2D變形

CSS3所提供的動畫功能主要包括變形、轉換和動畫技術。變形是最基本的動畫形式，它主要通過CSS控制元素樣式屬性值的變化來實作。利用transform功能來實作文字或圖像的旋轉、縮放、傾斜和移動這4種類型的變形處理。

transform實作了一些可用SVG實作的變形功能，transform屬性的基本文法如下所示：

transform：none|<transform-function>[<transform-function>];

transform-function設定變形函數：matrix()、scale()、translate()、totate()、skew()。

rotate(<angle>)函數用法

scale()函數能夠縮放元素大小，文法格式：scale(<number>);number參數值可以是正數、負數和小數。

translate()函數能夠重新定位元素的坐标，文法格式如下：translate(<translation-value>);

skew()函數能夠讓元素傾斜顯示，會改變元素的形狀，文法格式如下：skew(<angle>);

matrix()是矩陣函數，調用該函數可以非常靈活地實作各種變形效果。文法格式如下：

matrix(<number>,<number>,<number>,<number>,<number>,<number>);

CSS變形的原點預設為對象的中心點，如果要改變這個中心點，可以使用transform-origin屬性進行定義。transform-origin屬性的初始值為“50% 50%”,适用于塊狀元素和內聯元素，transform-origin接受兩個參數，可以是百分比、em、px等具體的值，也可以是left、center、right，或者top、middle、bottom等描述性關鍵字。

CSStransformation和CSS transition是兩種不同的動畫模型。

transition屬性是一個複合屬性，可以同時定義transition-property、transitionduration、transition-timing-function、transition-delay、transition-property、transition-duration、transition-timing-function和transition-delay子屬性值。

transition-property屬性用來定義轉換動畫的CSS屬性名稱。

transition-duration屬性用來定義轉換動畫的時間長度，即設定從舊屬性換到新屬性花費的時間，機關為秒。

transition-delay屬性用來定義過渡動畫的延遲時間。

transition-timing-function屬性用來定義過渡動畫的效果，初始值為ease。

• ease：緩解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函數，即立方貝塞爾。
• linear：線性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函數。
• ease-in：漸顯效果，等同于cubic-bezier(0.42,0,1.0,1.0)函數。
• ease-out：漸隐效果，等同于cubic-bezier(0,0,0.58,1.0)函數。
• ease-in-out：漸顯漸隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函數。
• cubic-bezier：特殊的立方貝塞爾曲線效果。

animation屬性是一個複合屬性，它包含了animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction子屬性值。

animation-name屬性可以定義CSS動畫的名稱，初始值為none。

animation-duration屬性定義CSS動畫的播放時間，初始值為0。

animation-timing-function屬性定義CSS動畫的播放方式，初始值為ease。

animation-delay屬性可以定義CSS動畫延遲播放時間，初始值為0。

animation-iteration-count屬性定義CSS動畫的播放次數，初始值為1，infinite表示無限次。

animation-direction屬性定義CSS動畫的播放方向，初始值為normal，另一個值為alternate。