*{margin:0;padding:0;list-style:none;}

.main .view{ width:290px; height:240px; overflow:hidden; position:relative; margin:10px; float:left;}
.main .hover{
	width:290px; background:rgba(0, 0 ,0 ,0.5); position:absolute; top:60px; left:0; text-align:center; color:#fff;
	transform:rotate(55deg);
	-moz-transform:rotate(55deg);
	-webkit-transform:rotate(55deg);
	transition:all 0.5s;
	-moz-transition:all 0.5s;
	-webkit-transition:all 0.5s;
	overflow:hidden; height:0; z-index:4000;/*transform:translateX(200px);*/}/*写好样式，进行隐藏，用overflow:hidden; height:0;*/
.main .hover h3{color:#fff; border-bottom:2px solid rgba(255, 255 ,255, 0.5); padding-bottom:10px;padding-top: 20px;}
.main .hover p{line-height: 100%;padding: 10px 0;}
.main .view:hover .hover{height:220px;transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);}
/*before   after为选择器，一般给选择器加动画背景，设置动画样式*/
.main .view:before{
	content:""; position:absolute; top:-280px; right:0;width:360px; height:390px; background:rgba( 150, 50, 100,0.5);
	transform:rotate(55deg) translateX(60px);
	-moz-transform:rotate(55deg) translateX(60px);
	-webkit-transform:rotate(55deg) translateX(60px);
	transform-origin:100% 0%;
	-moz-transform-origin:100% 0%;
	-webkit-transform-origin:100% 0%;
	transition:all 0.5s ease 0.3s;
	-moz-transition:all 0.5s ease 0.3s;
	-webkit-transition:all 0.5s ease 0.3s;

}/*写好样式，进行隐藏，用top:-240px;*/
.main .view:hover:before{ top:0;}
.main .view:after{
	content:""; position:absolute;bottom:-280px; left:0;width:360px; height:390px; background:rgba( 150, 50, 100,0.5);
	transform:rotate(55deg) translateX(-60px);
	-moz-transform:rotate(55deg) translateX(-60px);
	-webkit-transform:rotate(55deg) translateX(-60px);
	transform-origin:0% 100%;
	-moz-transform-origin:0% 100%;
	-webkit-transform-origin:0% 100%;
	transition:all 0.5s ease 0.3s;
	-moz-transition:all 0.5s ease 0.3s;
	-webkit-transition:all 0.5s ease 0.3s;
}
.main .view:hover:after{ bottom:0px;}