CSS学习笔记–2D转换模块
一、转换样式（transform）:
1.旋转，其中deg是单位，代表多少度：
transform: rotate (45deg)
2.平移，第一个参数是水平方向，第二个参数是垂直方向：
transform： translate (50px, 100px)
3.缩放，第一个参数是水平方向，第二个参数是垂直方向，取值没单位；如果取值在水平和垂直缩放都一样，那么可以简写为一个参数：
transform： scale（x,y）
3.1如果水平和垂直方向都是1，代表不缩放： transform: scale(1,1)
3.2如果取值大于1，代表放大；如果取值小于1，代表缩小；
注意点：
1.如果需要进行多个转换，那么用空格隔开：
例如： transform: rotate(45deg) translate(x,y) ;
2.2D转换模块会修改元素的坐标系，所以旋转之后在平移就不是水平平移了；
二、形变中心点：
1.默认情况下，所有元素都是以自己的中心点作为参考来旋转的（正数表示顺时针方向），我们可以通过形变中心点属性来修改他的参考点；
格式：
transform-origin：0px 0px ;
(第一个参数：水平方向，第二个参数：垂直方向)
2.取值有三种形式：a. 具体像素；b. 百分比；c. 特殊关键字（如：center、left、top等）
三、旋转轴向：
1.想围绕哪个轴旋转，那么只需要在 rotate 后面加上哪个轴即可（例如: 围绕 Z 轴转：transform： rotateZ (45deg) ）
四、透视属性（ perspective: 500px; ）：
1.什么是透视: 远小近大；
2.注意点: 透视属性必须添加到需要呈现远小近大效果元素的父元素;
五、盒子与文字的阴影:
1.给盒子添加阴影
box-shadow： 水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影；
2.盒子的阴影分为内外阴影，默认为外阴影；
3.快速添加阴影只需写三个参数即可：
box-shadow: 水平偏移 垂直偏移 模糊度；（如取值：0 0 10px)
默认情况下，阴影的颜色和盒子内容颜色一致；
4.文字阴影:
text-shadow: 水平偏移 垂直偏移 模糊度 阴影颜色；
===笔记内容来自于《从零玩转HTML5前端+跨平台开发》