* {
	margin:0;
	padding:0;
}
ul {
	list-style:none;
}
body {
	background-color:black;
	overflow:hidden;
	perspective:1000px;
}
.box {
	width:316px;
	height:387px;
	border:5px solid #fc3;
	margin:100px auto;
	transition:all 1s;
	transform-origin:center bottom;
}
.box ul {
	position:relative;
	width:306px;
	height:377px;
	border:5px solid #fc3;
	transform-style:preserve-3d;
	perspective:1000px;
}
.box	ul li {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transition:all 1s;
	transform-origin:left center;
	border:1px solid  gold;
	box-sizing:border-box;
}
.box ul li img {
	width:100%;
	height:100%;
}
.box:hover {
	transform:rotateX(45deg);
}
.box ul:hover li:nth-child(6) {
	transform:rotateY(-160deg);
	transition:all 1s 2s;
}
.box ul:hover li:nth-child(5) {
	transform:rotateY(-120deg);
	transition:all 1s 3s;
}
.box ul:hover li:nth-child(4) {
	transform:rotateY(-100deg);
	transition:all 1s 4s;
}
.box ul:hover li:nth-child(3) {
	transform:rotateY(-70deg);
	transition:all 1s 5s;
}
.box ul:hover li:nth-child(2) {
	transform:rotateY(-40deg);
	transition:all 1s 6s;
}