* {
	margin:0px;
	padding:0px;
}
#box {
	width:470px;
	height:370px;
	border:1px solid blue;
	margin:30px auto;
	padding:5px;
	box-shadow:2px 2p 2px green;
	border-radius:8px;
	background:#7FEB8E;
	opacity:0.8;
}
#box1 {
	width:190px;
	height:140px;
	border:0px solid #ccc;
	margin:5px;
	position:relative;
	background:#E9710E;
	overflow:hidden;
}
/*用于放置img的div*/
	 #timg {
	width:190px;
	height:140px;
	border:0px solid red;
}
#box1 #hd {
	width:186px;
	height:136px;
	border:3px solid white;
	position:absolute;
	top:-148px;
	left:0px;
	background:#E2DB4D;
	transform:rotateX(270deg);
	transition:all 0.5s ease-in-out;
}
#box1 p {
	display:block;
	position:absolute;
	top:150px;
	left:48px;
	font-weight:bold;
	transition:all 0.5s ease-in-out;
}
span {
	position:absolute;
	top:50px;
	left:46px;
	text-shadow:2px 2px 5px #ccc;
}
#box1:hover #p1 {
	top:100px;
}
#box1:hover #hd {
	transform:translate(0px,147px);
}
/**---------------------------------------------------*/		
	#box2 {
	width:190px;
	height:140px;
	border:0px solid #ccc;
	margin:5px;
	position:relative;
	left:270px;
	top:-145px;
	background:#E9710E;
	overflow:hidden;
}
#timg2 {
	width:190px;
	height:140px;
	border:0px solid #7FBEED;
}
#hd2 {
	width:185px;
	height:135px;
	border:3px solid white;
	background:#E2DB4D;
	position:absolute;
	top:0px;
	left:-198px;
	transition:all 0.3s ease-in-out;
}
#p2 {
	width:145px;
	font-weight:bold;
	text-align:center;
	position:absolute;
	top:140px;
	left:23px;
	transition:all 0.3s ease-in-out;
}
#box2:hover #hd2 {
	transform:translate(198px,0px);
}
#box2:hover #p2 {
	transform:translate(0px,-40px);
}
/*--------------------------------------*/
	#box3 {
	width:190px;
	height:140px;
	border:0px solid #ccc;
	margin:5px;
	position:relative;
	left:0px;
	top:-80px;
	background:#E9710E;
	overflow:hidden;
}
#timg3 {
	width:189px;
	height:139px;
	border:1px solid #ccc;
}
#hd3 {
	width:186px;
	height:135px;
	border:3px solid white;
	background:#E2DB4D;
	position:absolute;
	transform:rotateX(270deg);
	transition:all 0.3s ease-in-out;
}
#p3 {
	width:145px;
	font-weight:bold;
	text-align:center;
	position:absolute;
	top:140px;
	left:23px;
	transition:all 0.3s ease-in-out;
}
#box3:hover #hd3 {
	transform:rotateX(360deg);
}
/*------------------------------------*/
	#box4 {
	width:190px;
	height:140px;
	border:0px solid #ccc;
	margin:5px;
	position:relative;
	left:270px;
	top:-225px;
	background:#E9710E;
	overflow:hidden;
}
#timg4 {
	width:190px;
	height:140px;
	border:1px solid #7FBEED;
}
#hd4 {
	width:185px;
	height:135px;
	border:3px solid white;
	background:#E2DB4D;
	position:absolute;
	/*透明度设置为0  隐藏滑动div*/
			opacity:0;
	transition:all 0.6s ease-in-out;
}
#box4:hover #hd4 {
	opacity:1;
	transform:rotate(360deg);
}