css3的2d轉化，我所知的有5種。 因為是css屬性，所以必然，2d轉化的設置在style中設置基本格式，transform：XXX；以選擇哪種轉化，還可以設置transition：time；以設置轉化時間（不過不能設置在初始狀態下，否則無效） 下麵按標號進行介紹： 1.translate 有2種 ...
css3的2d轉化，我所知的有5種。
- translate平移
- rotate旋轉
- scale縮放
- skew拉伸
- matrix組合技
因為是css屬性，所以必然，2d轉化的設置在style中設置基本格式，transform：XXX；以選擇哪種轉化，還可以設置transition：time；以設置轉化時間（不過不能設置在初始狀態下，否則無效）
下麵按標號進行介紹：
1.translate
有2種設置方式，如transform：translate（a，b）a為x軸上偏移量，b為y軸上偏移量 （網頁原點在最左上角，x軸正方向向正右，y軸正方向向正下）。
或translate（a）則a為x，y軸上偏移量，還可以使用translateX，translateY進行指定方向偏移。
2.rotate
transform：rotate（a）a為旋轉角度，a為正向順時針旋轉，為負逆時針。
rotate可以設置transform-origin以設置旋轉點的位置。
rotateX和rotateY有點意思，他們是關於x，y軸旋轉。
3.sclae
transform：scale（a，b）將元素沿x，y方向拉伸a，b倍，transform：scale（a）與transform：scale（a，a）一致
4.skew
transform：skew（a，b）拉著元素最右下角向右和下拉伸a，b角度。我試著設置了一下transform-origin但是效果僅是變化後元素會突然平移，效果很差，這個特性一般應該沒用。
歡迎評論
