CSS屬性transform之旋轉:rotate,縮放:scale,傾斜:skew,移動:translate

眾所周知，無論什麼東西，誰都希望努力做到最好，那麼，在製作精美圖片背景的同時，註解文字的擺放又成了問題，下面我將簡單用transform的幾個屬性來做圖片的動態提示效果
一、旋轉rotate
用法：transform:rotate（360deg）;
共一個引數“角度”，單位deg為度的意思，正數為順時針旋轉，負數為逆時針旋轉，上述程式碼作用是順時針旋轉360度。

圖1

圖2
如圖1、2，簡單的樣式就不說了，這裡要提一句的是我用到的figure屬性，它規定獨立的流內容，比如說影象、圖示、照片、程式碼等等，當我滑鼠移動到圖片上的時候會旋轉出來一個矩形框，如圖3

圖3

二、縮放scale
用法：transform: scale(1.2.1.2) 或者 transform: scale(1.2, 1.2);
參數列示縮放倍數；
• 一個引數時：表示水平和垂直同時縮放該倍率
• 兩個引數時：第一個引數指定水平方向的縮放倍率，第二個引數指定垂直方向的縮放倍率。

圖4
寫法和旋轉寫法是一樣的，變換的只是它的屬性和樣式，圖5是效果圖

圖5
三、傾斜skew
用法：transform: skew(90deg) 或者 transform: skew(90deg, 90deg);
參數列示傾斜角度，單位deg
• 一個引數時：表示水平方向的傾斜角度；
• 兩個引數時：第一個參數列示水平方向的傾斜角度，第二個參數列示垂直方向的傾斜角度。
關於skew傾斜角度的計算方式表面上看並不是那麼直觀，需要說明的是skew的預設原點img是這個圖片的中心點

圖6

圖7

圖8
不知道是我什麼地方錯了，圖7文字提示被扭曲成了一條線，圖8是效果圖

四、移動translate
用法：transform: translate(-600px) 或者 transform: skew(-600px, 0px);
參數列示移動距離，單位px，
• 一個引數時：表示水平方向的移動距離；
• 兩個引數時：第一個參數列示水平方向的移動距離，第二個參數列示垂直方向的移動距離。

圖9

圖10
如圖9所示，我還加入了文字提示框移動出現的時間，由於我做的是圖片的動態文字提示，所以圖10的效果圖並沒有看出什麼不同，望體諒
以上是我對transform幾個屬性的簡述，如果有表述得不對的地方，需要進步的地方，歡迎指點。下次我會更加註意，做一篇更好的文章！