2017/11/25 2D变换

　　2D变换

一、盒模型解析模式

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

　　1）content-box：标准盒模型(和css2一样的计算)

　　　　　　　　　　宽度和高度之外绘制元素的内边距和边框

　　 　　　　　　　　width,height外绘制padding,border，盒子大小变大

　　2） border-box：怪异盒模型

　　　　　　　　　 从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度

　　　　　　　　　width,height内绘制padding,border，盒子大小不变

二、calc()运算

　　1、calc()使用通用的数学运算规则：

　　　　使用“+”、“-”、“*” 和 “/”四则运算；

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

　　　　可以混合使用各种单位进行计算；

　　　　表达式中有“+”和“-”时，其前后必须要有空格，如"widht:calc(12%+5em)"这种没有空格的写法是错误的；

　　　　 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

　　2、浏览器的兼容性： 需要添加浏览器的前缀

三、transform实现2D变换

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

　　　　1、 rotate(angle) 定义 2D 旋转，在参数中规定角度。（单位deg）

　　　　 正值 顺时针

　　　　 负值 逆时针

　　　　2、 scale(x,y) 定义 2D 缩放。【正数 | 小数 | 零 | 负数 】

　　　　一个值的时候表示X,Y一样

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

　　　　一个值为默认X轴

　　　　4、 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

　　 　1、X :定义基点被置于 X 轴的何处。 值： 【left center right 】 【length 】 【%】

　　　2、Y :定义基点被置于Y 轴的何处。 值： 【top center bottom】 【length】 【 %】

　　　3、 Z :定义基点被置于Z轴的何处(3D环境才有)。 值： 【length】

　　transform多值

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

　　 执行先后：

　　　　 B) transform:scale() translate() 先scale后translate 受scale影响

四、禁止文字选中　

　　user-select:none

　　-moz-user-select:none;

　　 -ms-user-select:none;

　　-webkit-user-select:none;