移动端工程师学习javascrip的笔记和归纳，内容非常基础。

平面转换 transform

作用：为元素添加动态效果，一般与过渡(transition)配合使用

概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）

平移 translate

属性：

transform：translate(x轴移动距离，y轴移动距离)

取值：

像素单位数值
百分比（参照盒子自身尺寸计算结果）
正负均可

平移实现居中效果

方法1: 定位

position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -50px
width: 200px;
height: 100px;

方法2: 百分比参照盒子自身尺寸计算结果

position: absolute
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

技巧：

translate() 只写一个值，表示沿x轴移动
单数设置x或y移动距离：translateX() / translateY()

旋转 rotate

属性：transform：rotate(旋转角度，角度单位是deg)

img {
   width: 200px;
   transition: all 1s;
}

img:hover {
   transform：rotate(360deg);
}

技巧：

取值为正：顺时针旋转
取值为负：逆时针旋转
默认情况下，转换原点是盒子中心点

改变旋转原点

属性：

transform-origin：水平远点位置 垂直远点位置；

取值：

方位名词：left、top、right、bottom、center
像素单位数值
百分比

img {
   width: 200px;
   transition: all 1s;
   transform-origin: right bottom;
}

img:hover {
   transform：rotate(360deg);
}

多重转换

技巧：先平移在旋转

旋转会改变坐标轴向
多重转换：以第一种转换形态的坐标轴为准

transform：translate() rotate();

缩放 scale

属性：

transform：scale(缩放倍数)
transform：scale(x轴缩放倍数，y轴缩放倍数)

技巧：

通常，只为scale()设置一个值，表示x、y等比缩放
取值大于1表示放大，小于1表示缩小

倾斜 skew

属性：

transform: skew()

取值：角度deg

渐变

作用：渐变是多个颜色逐渐变化的效果，一般用来设置盒子背景

分类：

线性渐变：
径向渐变：

线性渐变 linear-gradient

属性

background-image：linear-gradient(
   渐变方向，
   颜色1 终点位置，
   颜色2 终点位置，
   ...
);

取值：

渐变方向：可选（默认上到下）；to 方位名词；角度读书
终点位置：可选；百分比

background-image：linear-gradient(
   to right，
   red 80%，
   green，
   ...
);

径向渐变 radial-gradient

属性

background-image：radial-gradient(
   半径 at 圆心位置，
   颜色1 终点位置，
   颜色2 终点位置，
   ...
);

取值：

半径可以是2条，则为椭圆
圆心位置取值：像素单位数值/百分比/方位名词

参考资料

HTML5、CSS3学习笔记（十）平面转换、渐变