* {
	margin:0;
	padding:0;
}
.box {
	position:relative;
	width:160px;
	height:240px;
	margin:50px auto;
	cursor:pointer;
}
.inbox {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	transition:all 3s ease-in-out;
	transform-origin:bottom center;
	border:2px solid;
	border-top-color:red;
	border-left-color:blue;
	border-right-color:yellow;
	border-bottom-color:green;
	box-shadow:0 0 3px 2px purple;
}
.box:hover .inbox:nth-child(1) {
	transform:rotate(0deg)
}
.box:hover .inbox:nth-child(2) {
	transform:rotate(-20deg)
}
.box:hover .inbox:nth-child(3) {
	transform:rotate(-40deg)
}
.box:hover .inbox:nth-child(4) {
	transform:rotate(-60deg)
}
.box:hover .inbox:nth-child(5) {
	transform:rotate(-80deg)
}
.box:hover .inbox:nth-child(6) {
	transform:rotate(-100deg)
}
.box:hover .inbox:nth-child(7) {
	transform:rotate(-120deg)
}
.box:hover .inbox:nth-child(8) {
	transform:rotate(-140deg)
}
.box:hover .inbox:nth-child(9) {
	transform:rotate(-160deg)
}
.box:hover .inbox:nth-child(10) {
	transform:rotate(-180deg)
}
.box:hover .inbox:nth-child(11) {
	transform:rotate(-200deg)
}
.box:hover .inbox:nth-child(12) {
	transform:rotate(-220deg)
}
.box:hover .inbox:nth-child(13) {
	transform:rotate(-240deg)
}
.box:hover .inbox:nth-child(14) {
	transform:rotate(-260deg)
}
.box:hover .inbox:nth-child(15) {
	transform:rotate(-280deg)
}
.box:hover .inbox:nth-child(16) {
	transform:rotate(-300deg)
}
.box:hover .inbox:nth-child(16) {
	transform:rotate(-320deg)
}
.box:hover .inbox:nth-child(17) {
	transform:rotate(-340deg)
}
.box:hover .inbox:nth-child(18) {
	transform:rotate(-360deg)
}