CSS3 transform 詳解

最近在作H5，發現仍是對transform瞭解的不是特別深入，這裏作一個總結。

CSS3 transform

transform的含義是：改變，使…變形；轉換

CSS3 transform都有哪些經常使用屬性

rotate()
// 旋轉

skew()
// 傾斜

scale()
// 縮放

translate(,)
// 變更, 位移

• transform:rotate()：

含義：旋轉；其中「deg」是「度」的意思，如「10deg」表示「10度」下同。
是以當前元素的中心爲重心,旋轉順時針開始。0deg就是普通的狀態,180deg將會倒置

• transform : skew()：

含義：傾斜
單位:deg
用法:以自身元素爲基礎,值爲正數時向右傾斜skew(44deg),值爲負數時向左傾斜(-44deg)
特殊值:-90deg,90deg,視覺上元素消失。180deg,-180deg恢復。一次類推。

• transform:scale()：

含義：比例
單位：無
用法: 值爲正數且value>1時按照數值比例放大transform:scale(1.5)，
值爲正數且0<value<1時按照數值比例縮小transform:scale(0.5),
值爲負數時：-1< value <0 時,一樣縮小|value|而且rotate(180deg),
值爲負數時:value < -1時，放大|value|而且rotate(180deg)

• transform:translate(x,y)：

含義: 變更，位移
單位: px(rem)
用法: 把目標元素中點理解爲平面座標系的(0px,0px)，全部的操做所有基於(0,0)起始點。