@charset "utf-8";
* {
	margin: 0px;
	padding: 0px;
}

body {
	padding: 30px;
}
.div1 {
	height: 500px;
	width: 100%;
}
.div1 .div1-1 {
	float: left;
	height: 100px;
	width: 300px;
	margin: 50px;
	background: #39F;
	border: 5px groove rgba(200,60,30,0.8);
	color: #FFF;
}

.div1 .div1-1.div1-1-1:hover{
	transform: translate(100px,100px);
	background-color: #F63;
	
}/*translate(x,y)定义2D移动转换*/

.div1 .div1-1.div1-1-2:hover{
	transform:translate(100px,0px);
	/*=transform:translateX(100px);数值正负都可以，正向右，负向左.*/}/*translate(x)只用x轴的值的移动*/
.div1 .div1-1.div1-1-3:hover{
	transform:translate(0px,100px);
	/*=transform:translateY(100px);数值正负都可以，正向下，负向上.*/}/*translate(y)只用y轴的值的移动*/
.div1 .div1-1.div1-1-4:hover{
	transform:scale(0.2,0.2);
	/*scale(x,y)定义2D缩放转换*/}
.div1 .div1-1.div1-1-5:hover{
	transform:scaleX(2);
	/*transform:scaleY(2)*/}/*scale(x/y)通过设置x/y轴的值来定义缩放转换*/
.div1 .div1-1.div1-1-6:hover{
	transform: rotate(45deg);
	/*rotate(45deg-45度)定义2D旋转，在参数中定义角度*/}
.div1 .div1-1.div1-1-7:hover{	
    /*transform: skew(30deg,45deg);*/
	transform: skewX(30deg);
	 /* transform: skewY(45deg)*/}
	 
.div1 .div1-1.div1-1-8:hover{
	transform:matrix(2,0.3,0.5,2,10,10);	} /* 第一和第四是缩放；第二和第三是旋转；第五和第六是移动*/
	
.div1 .div1-1.div1-1-9:hover{
	transform:translate(100px,100px) scale(0.2,0.2) rotate(45deg);}
	
.div1 .div1-1.div1-1-10:hover{
	transform:scale(0.2,0.2); 
   /* transform-origin:left to top;*/ /*transform-origin-改变元素变形的旋转点;x轴可有left,right,center;y轴可有top,bottom,center */
	transform-origin:0 0; /*表示与数值来为旋转点 */
/*	transform-origin:30px 0; /*像素和数值来为旋转点 */
/*	transform-origin:30px 30px; /*用像素来为旋转点 */
/*	transform-origin:30% 30%;} /* 用百分比来为旋转点*/}

.div1 .div1-1.div1-1-11:hover{
	transform: translate(100px,0px) scale(1.5,1.5) rotate(30deg) skew(45deg);}



.div2 {
	height: 300px;
	width: 100%;
	clear: left;
	perspective:1000px;/* 为转换3D元素定义透视视图*/
	background-color: #FCF;
	
	
}
.div2 .div2-1 {
	float: left;
	height: 150px;
	width: 300px;
	margin: 50px;
	background: #39F;
	border: 5px groove rgba(200,60,30,0.8);
	color: #FFF;
	
}
.div2 .div2-1.div2-1-1:hover{
	background: #60F;
	width:150px;
	transform: translate3d(100px,100px,100px);
	
	
	
}/*translate(x,y,z)定义3D移动转换*/


.div2 .div2-1.div2-1-2:hover{
	/*transform: translate3d(0,0px,-300px);*/
	transform:translateZ(-500px);
	
}/*translate(x,y,z)定义3D移动转换,上面要带perspective:1000px;连用*/

.div2 .div2-1.div2-1-3:hover{
	transform:rotate3d(0,1,0,45deg);
	transform-origin:right;}
.div2 .div2-1.div2-1-4:hover{
	transform:scaleZ(2) rotateX(60deg);
	transform-origin:top;}
.div2 {
	
	perspective:1000px;/* 为转换3D元素定义透视视图*/
	
}
.div2:hover {
	transform:rotateX(45deg);
	}
	
.div3 {
	width: 100%;
	height: 500px;
	background-color: #6CF;
	clear: left;
	}
.div3 .div3-1 {
	float: left;
	height: 150px;
	width: 300px;
	background: #39F;
	font-size: 18px;
	margin-top: 50px;
	margin-right: 80px;
	margin-left: 50px;
}
.div3 .div3-1.div3-1-1{
	background:#F00;
	transition-property:all;/*transition-property-规定应用过渡的CSS属性的名称:none(没有属性会获得过渡效果)/all(所有属性都会将获得过渡的效果)/属性名称，如width,height...*/
	transition-duration:2s;/*定义过渡效果花费的时间，默认值是0，单位是秒或毫秒*/
	
}
.div3 .div3-1.div3-1-1:hover{
	background:#F6C;
	width:100px;}
.div3 .div3-1.div3-1-2{
	background:orange;
	transition-property:width;
	transition-duration:1s;
	transition-timing-function:cubic-bezier(02.,0.4,0.5,1);
	/*transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier/(02.,0.4,0.5,1);*/
	
	/* linear:规定以相同速度开始至结束的过渡效果（等于cubic-bezier（0,0,1,1）
	   ease:规定慢速开始，然后变快，然后慢速结束的过渡效果（等于cubic-bezier（0.25,0.1,0.25,1）
	   ease-in:规定以慢速开始的过渡效果（等于cubic-bezier（0.42,0,1,1）
	   ease-out:规定以慢速结束的过渡效果（等于cubic-bezier（0,0,0.58,1）
	   ease-in-out:规定以慢速开始和结束的过渡效果（等于cubic-bezier（0.42,0,0.58,1）
	   cubic-bezier（n,n,n,n）在  cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值
	
	*/
    transition-delay:1s;/*规定过渡效果何时开始，默认值是0*/
	}
.div3 .div3-1.div3-1-2:hover{
	background:#C30;
	width:150px}
.div3 .div3-1.div3-1-3{
	background:blue;
	transition:all 2s ease-in-out 0s;}
.div3 .div3-1.div3-1-3:hover{
	background:#C30;
	width:150px}
.div3 .div3-1.div3-1-4{
	background: rgba(120,60,30,0.8);
	transition:width 1s ease, background 2s linear;}
.div3 .div3-1.div3-1-4:hover{
	background: #FF0;
	width:150px;}
.div3 .div3-1.div3-1-5{
	background: rgba(20,60,130,0.8);
	transition:all 1s ease 0.5s ;}
.div3 .div3-1.div3-1-5:hover{
	background: #60F;
	width:150px;
	transform:rotate(360deg);}

.div4{
	width: 100%;
	height: 300px;
	background-color: #69F;
	clear: left;
	margin-top: 30px;
	margin-bottom: 50px;
	}
.div4 .div4-1 {
	height: 150px;
	width: 300px;
	background: rgba(160,30,12,0.8);
	font-size: 18px;
	margin-top: 50px;
	margin-right: 30px;
	margin-left: 30px;
}

.div4 .div4-1.div4-1-1{
	animation-name:mydh1; /*动画的名称*/
	animation-duration:1s;/*规定动画完成一个周期所花费的时间 秒或毫秒 默认值为0*/
	animation-timing-function:linear;/*规定动画的速度曲线 默认值是“ease”  和上面过渡效果相同的*/
	animation-delay:0.2s; /* 规定动画何时开始。默认为0*/
	animation-iteration-count:3;/*规定动画被播放的次数，默认为1，infinite为无限次播放*/
	animation-direction:alternate;/*animation-direction-规定动画是否在下一周期逆向地播放。默认值“normal-顺向播放“,alternate-动画应该轮流方向播放*/
	/*animation-fill-mode:both;*//*animation-fill-mode——规定对象动画时间之外的状态:none——不改变默认行为;forwards——当动画完成后,保持最后一个属性值;backwards——animatiom-delay所指定的一段时间内,在动画显示之前,应用开始属性值;both——向前和向后填充模式都被应用*/
	}
@keyframes 
mydh1{              
 /*   from{                                    
		  margin-left:50px;
		  background:#33F;
		}
	to{                             
		 margin-left:300px;
		  background: #93F;
	   }
 */    
 
      0%{
		  margin-top:50px;
		  background:#33F;    /*相当于动画影片的开场剧场*/
		 }
		 
	   50%{  margin-top:300px;
	        margin-left:150px;
		    background:#F00;   /*相当于动画影片中间的剧情*/
	      }   /* ...... 里面还有加好多关键帧*/
		 
	       
	  100%{
		    margin-top:300px;
		    margin-left:50px;
		    background: #93F;  /*相当于动画影片的大结局*/
		  }
	}

.div5{
	height: 200px;
	width: 150px;
	margin-top: 50px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 50px;
	padding-top: 20px;
	padding-bottom: 30px;
	animation:fz 6s infinite linear;
	perspective:500px;
}
@keyframes fz{
	0%{
		transform:rotateX(45deg);
		}
	
	20%{
		transform:rotateX(180deg);
		}
		
	40%{
		transform:rotateX(360deg);
		}
	

	
	60%{
		transform:rotateY(180deg);
		}
	90%{
		transform:rotateX(360deg);
		}
	95%{
		transform:rotateX(360deg);
		}
	100%{
		transform:rotateX(360deg);
		}
	}