2017/11/25 2D變換

　　2D變換

1、盒模型解析模式

　　一、box-sizing：盒模型解析模式

　　1）content-box：標準盒模型(和css2同樣的計算)

　　　　　　　　　　寬度和高度以外繪製元素的內邊距和邊框

　　 　　　　　　　　width,height外繪製padding,border，盒子大小變大

　　2） border-box：怪異盒模型

　　　　　　　　　 從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度

　　　　　　　　　width,height內繪製padding,border，盒子大小不變

2、calc()運算

　　一、calc()使用通用的數學運算規則：

　　　　使用「+」、「-」、「*」 和 「/」四則運算；

　　　　 可使用百分比、px、em、rem等單位；

　　　　能夠混合使用各類單位進行計算；

　　　　表達式中有「+」和「-」時，其先後必需要有空格，如"widht:calc(12%+5em)"這種沒有空格的寫法是錯誤的；

　　　　 表達式中有「*」和「/」時，其先後能夠沒有空格，但建議留有空格。

　　二、瀏覽器的兼容性： 須要添加瀏覽器的前綴

3、transform實現2D變換

　　transform:rotate()  skew()  scale()  translate(,)；

　　　　一、 rotate(angle) 定義 2D 旋轉，在參數中規定角度。（單位deg）

　　　　 正值 順時針

　　　　 負值 逆時針

　　　　二、 scale(x,y) 定義 2D 縮放。【正數 | 小數 | 零 | 負數 】

　　　　一個值的時候表示X,Y同樣

　　　　三、translate(x,y)： 定義 2D 位移。（length）

　　　　一個值爲默認X軸

　　　　四、 skew(x-angle,y-angle)：定義沿着 X 和 Y 軸的 2D 傾斜轉換。（單位deg）

　　　　　　　

　　　　一個參數時：表示水平方向的傾斜角度

　　　　　1）skewX(angle) 定義沿着 X 軸的 2D 傾斜轉換。

　　　　　　

 

　　　　　2） skewY(angle) 定義沿着 Y 軸的 2D 傾斜轉換。

　　　　　　 

　　transform-origin 轉換的基點（x y z）;【默認50% 50%】，效果等同於center center

　　 　一、X :定義基點被置於 X 軸的何處。 值： 【left center right 】 【length 】 【%】

　　　二、Y :定義基點被置於Y 軸的何處。 值： 【top center bottom】 【length】 【 %】

　　　三、 Z :定義基點被置於Z軸的何處(3D環境纔有)。 值： 【length】

　　transform多值

　　　　 A ) transform:scale()　 translate()；與 transform:scale()　 translate();

　　 執行前後：

　　　　 B) transform:scale() translate() 先scale後translate 受scale影響

4、禁止文字選中　

　　user-select:none

　　-moz-user-select:none;

　　 -ms-user-select:none;

　　-webkit-user-select:none;