css3 翻轉和旋轉的差別

標籤：blog   http   ar   for   art   div   sp   log   on   

        我曾經一直以為旋轉跟翻轉一樣，今日自己旋轉了好久都發覺跟翻轉差一點點，糾結了十幾分鐘才明確，僅僅能怪自己的立體感太差了。

        css3中的transform中有旋轉，放縮，傾斜，平移的功能，分別相應的屬性是：rotate，scale，skew，translate

        旋轉：（rotate）

-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);transform:rotate(10deg);

        翻轉：（scale）

       (這個屬性是放縮的功能，怎麼能翻轉的！原來括弧裡面（1，1）前者表示X軸，後者表示Y軸，當數字大於1時放大，大於0並小於1時縮小，負數代表翻轉)

       水平翻轉：

-webkit-transform:scale(-1，1);-moz-transform:scale(-1，1);transform:scale(-1，1);

       垂直翻轉：

-webkit-transform:scale(1，-1);-moz-transform:scale(1，-1);transform:scale(1，-1);

      

參考一位非常厲害師兄(@桑尼真)的部落格：http://blog.sina.com.cn/s/blog_74d6cedd0100v9bk.html

css3 翻轉和旋轉的差別