css3一些属性

1）box-shadow:inset 1px 1px 1px color;（阴影）

1.第一个参数默认朝外，可设置朝内inset或者不写
2.第二个参数必须写，左右水平偏移量；
3.第三个参数必须写，上下垂直偏移量；
4.第四个参数可选，扩散blur宽度
5.第五个参数可选，颜色
box-shadow里面参数可以叠加，eg：

box-shadow:inset 1px 1px 1px pink，
				-1px -1px 2px blue;
				//内外阴影都可以叠加写

2）text-shadow（可以设置文字阴影，有浮雕）

3）font-face

@font-face{
	font-family:'abc';//自己定义名字
	url:'';地址
}
div{
	font-family:'abc';
}

4）box-sizing(默认W3C标准盒子模型width设置的是内容；ie6混杂模式width设置的是padding，border和content)

5）overflow-x：scroll/auto;(设置这个,overflow-y自动变为auto)手机端平移的

6）transtion：transtion-property transtion-duration transtion-timing-funtion transtion-delay;过渡综合属性

transtion-property:all; //过渡属性
transtion-duration:1s; //过渡花的时间
transtion-timing-funtion:linear; //过渡类型，先快后慢还是先慢后快还是线性；可以设置贝塞尔曲线cubic-bezier(0.075, 0.82, 0.165, 1)里面写四个参数，前两个为一个点，后两个为一个点，看物体速率主要看斜率，可以自己调节
transtion-delay:1s; //过渡延迟时间

6）animation（过渡，效果可以更多变）

@keyframes name {
	0%:{  //百分之零可以写成from
		//写状态，比如偏移量，颜色
	}
	25%：{
		//写状态，比如偏移量，颜色
	}
	50%：{
		//写状态，比如偏移量，颜色
	}
	75%：{
		//写状态，比如偏移量，颜色
	}
	100%：{  //百分之百可以写成to
		//写状态，比如偏移量，颜色
	}
}
div{
animation：name
animation-timing-funtion animation-delay animation-fill-mode;
//属性同transtion，
也可以animation-timing-funtion
参数可以写贝塞尔曲线cubic-bezier(0.075, 0.82, 0.165, 1)，
括号四个值定义的是每一段运动的状态
animation-fill-mode:forwards保留动画结束最后一帧的状态，比如动画结束最后一帧是红色背景，则不会切回原来的背景颜色；
backwards设置动画开始后的第一帧；both两个都设置，一般用both
}

steps属性，（num,start/end）设置过后没有过渡效果，到时间跳转；一般下面这么用;当前面的参数为1时可以简写为steps-start或者steps-end

num时一个动画多少步完成动画
steps(1,end) 会忽略动画的最后一帧
steps(1,start)会忽略动画的开始一帧

@keyframes name {
	0%:{  //百分之零可以写成from
		//写状态，比如偏移量，颜色
	}
	25%：{
		//写状态，比如偏移量，颜色
	}
	50%：{
		//写状态，比如偏移量，颜色
	}
	75%：{
		//写状态，比如偏移量，颜色
	}
	100%：{  //百分之百可以写成to
		//写状态，比如偏移量，颜色
	}
}


animation:name 4s steps(1,end) forwards;

7）calc（）可计算属性；eg：

.father{
width:100px;
}
.son{
width:calc(50% - 30px);//注意-两边要有空格
}

8）transform(移动)

1.transform-origin

(中心点，旋转中心，平移中心设置)，值默认center center；可以写数字 0 0；是左上角，前面是x值，后面是y坐标值，越大越往下和右，相对于本身

2.transform:rotate();

括号参数一般写角度deg；其中有rotateX；rotateY；rotateZ,rotate相当于绕中心点围着z轴转
绕x，y轴转看的不是很真切，可以给父盒子设置

perspective:800px; /* 3D 元素距视图的距离（个人理解为设置深度） */
transform-style:preserve-3d;/* 使被转换的子元素保留其 3D 转换： *
perspective-origin:center center;/* 设置旋转中心点 */

transform:rotate3d(x,y,z,angle); 矢量x,y,z以及最后的角度旋转

3.transform:scale(.5，.5)；大于1扩张，小于1收缩,scalex,scaley,scalez,scale3d

1，伸缩的是坐标轴刻度transform:scale(.5，.5) translateX(100px);视觉只平移了50px
2，可以叠加操作transform:scale(.5，.5) scale(2，2)；不变

4.transform:skew(x，y)；参数角度

skewx;skewy

5.transform:translate();相当于自身平移百分比的话

translateX;translateY;translateZ
想居中可以：left：50%；transform:translateX(-50%);

6.transform:perspective();给本身设置进深；缺点不能设置perspective-origin

7.transform:matrix();transfrom的本质是矩阵的相乘；二维的是三阶矩阵，三维四阶矩阵

比如想要图片x轴2倍;|x,y,1 |为原始的坐标；想要里面的|x,y,1|都变成两倍；求前一个矩阵;得出前一个矩阵为| 2 , 0 , 0 | ，| 0 , 2 , 0 | ， | 0 , 0 , 1 | 所以matrix的参数为（2，0，0，2，0，0）即只看第一行和第二行（2，0），（0，2），（0，0）相当于x轴拉伸两倍；scale原理（a，0，0，b，0，0）

     | 2 , 0 , 0 |           | x |     | 2x |
     | 0 , 2 , 0 |       *   | y |  =  | 2y |
     | 0 , 0 , 1 |           | 1 |     | 1  |

比如想要图片平移（5，5）;|x,y,1 |为原始的坐标；想要里面的|x,y,1|都变|x+5,y+5|；求前一个矩阵;得出前一个矩阵为| 1 , 0 , 5 | ，| 0 , 1 , 5 | ， | 0 , 0 , 1 | 所以matrix的参数为（1，0，0，1，5，5）相当于整个图片位移了（5，5）；translate原理（1，0，0，1，x，y）

     | 1 , 0 , 5 |           | x |     | x+5 |
     | 0 , 1 , 5 |       *   | y |  =  | y+5 |
     | 0 , 0 , 1 |           | 1 |     | 1  |

rotate原理;matrix（cos(θ)，sin(θ)，-sin(θ)，cos(θ)，x，x）

 | cos(θ) , -sin(θ) , e |   | x |     | cos(θ)x+ -sin(θ)y+e|
 | sin(θ) , cos(θ) ,  f | * | y |  =  |sin(θ)x +cos(θ)y+ f |
 | 0      ,      0 ,  1 |   | 1 |     |    1      |

3d
缩放 : matrix(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1)
平移 : matrix(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1)