CSS3动画以及阴影总结

1.盒子阴影

box-shadow：阴影类型,X轴位移，Y轴位移，阴影大小，阴影扩展，阴影颜色

2.文本阴影

text-shadow属性
        	1.阴影偏移，由两个length构成，第一个文本右边的水平距离，负值表示左边
        	第二个长度值只当到文本下边的垂直距离，负值表示文本上方
        	2.阴影偏移后，指定模糊半径
        	3.只当颜色

3.transfrom动画

变形原点  transfrom-orgin:接受两个参数，em,px,%,left,right,top,botttm,middle
			 
             matrix(X,Y)矩阵变换,传递6个参数
			  translate(X,Y)移动元素对象
			  scale(X,Y)缩放元素  ,X代表宽度，Y代表高度
			  rotate()旋转元素，取值为角度值
			  sfew()倾斜元素对象，取值为角度值
			 

例子

           .test4{
			 -webkit-transition:1.5s ease-in-out,background 2.5s ease-in;	
			transition:1.5s ease-in-out,background 2.5s ease-in;	
			 -moz-transition:1.5s ease-in-out,background 2.5s ease-in;	
			}
			.test4:hover{
				/*transform-origin: 0 0;左上*/
				/*transform-origin: top right;右上*/
				/*transform-origin:0 100%;左下*/
				transform-origin: bottom right;/*右下*/
				transform:rotate(-90deg);
			}

4.transition介绍

	 * transition-property设置过度的css的属性
	 * 
	 * 取值为none，all,ident指定css属性
	 * 
	 * transition-duration设置过度时间
	 * 
	 * transition-delay设置过度延迟时间
	 * 
	 * transtion-timing-function:设置过渡效果
	 * ease环节效果     linear线性    ease-in渐显   ease-out渐隐 
	 * ease-in-out渐显渐隐  
	 */	

5.animation动画
只有谷歌和safair最新版兼容

		/*
		 * animation-name设置动画的名字
		 *   设置动画的时间-animation-duration动画的时间
		 * animation-timing-function动画的播放形式  ease,libear,easr-in,ease-out,ease-in,out
		 * animation-delay动画延迟
		 * animation-iteration-count:动画播放次数，infinite无限次,number
		 * aniamtion-direction动画的播放方向，alternate第偶次向前播放，第奇次向后播放
		 */

样例：图片3D旋转

          div{
				margin: 0 auto;
				width: 400px;
				height: 300px;
				background: url(img/2.jpg) center no-repeat;
				/*定义3D空间*/
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
				/*设设计沿x轴线性旋转动画，无限次播放*/
				-webkit-animation-name: x-spin;
				animation-name: x-spin;
				-webkit-animation-duration:20s;
				animation-duration:20s;
			  - webkit-animation-iteration-count: infinite;
			    animation-iteration-count: infinite;
			  -webkit-animation-timing-function: linear;
			   animation-timing-function: linear;
			}
			@-webkit-keyframes x-spin{
				0%{
					-webkit-transform: rotateX(0deg);
				}
				50%{
					-webkit-transform: rotateX(180deg);
					
				}
				100%{
					-webkit-transform: rotateX(360deg);
					
				}
			}