CSS渐变+2D转换

一、CSS渐变
1 线性渐变
div { background:linear-gradient(to right, red , blue) }
div { background: linear-gradient(to left top, red , blue); }
线性渐变指沿着某条直线朝一个方向产生渐变效果，如下图是从红色渐变到蓝色。
使用角度渐变

div { background: linear-gradient(10deg, red, blue) }

2 径向渐变
径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变。

3 重复渐变
1）重复性线性渐变
div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }
2）重复性径向渐变
div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }

二、
1. CSS3 过渡 transition
1） transition-property过度属性{
none 无过渡效果
all 默认
property name:指定一个或多个属性名称列表
}
2）transition-duration 过渡持续时间 单位为秒 “0.3s”
3）transition-timing-function 过渡线性规律
ease：默认值 逐渐变慢
linear：匀速
ease-in：加速
ease-out：减速
ease-in-out：先加速，后减速
cubic-bezier：定义一个时间曲线，前两个参数为“x1”和“x2”它俩定义开始控制点，后两个参数为“y1”和“y2”，它俩定义结束控制点。
4）transition-delay 过渡延迟，定义用户在进行操作后多久开始执行动画。

三、CSS3 2D转换
1.translate 位移
transform:translate(100px,0px);第一个参数：水平方向
第二个参数：垂直方向

 transform：translateX（100px） 仅在水平方向移动
 transform：translateY（100px） 仅在垂直方向移动

2.scale 缩放
transform:scale(0.5,0.5);水平缩小0.5倍，垂直缩小0.5倍
transform:scale(1.5,1.5);水平缩小1.5倍，垂直缩小1.5倍

3.rotate 旋转
元素围绕X轴旋转rotateX()
元素围绕Y轴旋转rotateY()
元素围绕Z轴旋转rotateZ()

4.transform-origin 原点
只有设置了transform属性的时候起作用

					   水平	 垂直
					   transform-origin: 20px   0px;
					   transform-origin: 50%   50%;
					   transform-origin: center  center;
					   transform-origin: left   top;

我说我写个总结吧，非要给我唱歌，什么怀旧老歌都给我唱，就我女朋友这种只唱怀旧歌还喜欢刀郎的人，在我们老家都是和我长辈们坐一桌的。没唱上去还怪歌不行。