<div class="showcase">
		<div id="box1"><p>Box 1</p></div>
		<div id="box2"><p>Box 2</p></div>
		<div id="box3"><p>Box 3</p></div>
		<div id="box4"><p>Box 4</p></div>
	</div>
.showcase{
	width:80%;
	background:lightgray;
	margin:auto;
}
#box1{
	width:10%;
	border:2px solid red;
	text-align:center;
	display:inline-block;
	margin:4em;
	transition:1s ease-in-out;
}
#box2{
	width:10%;
	border:2px solid blue;
	text-align:center;
	display:inline-block;
	margin:4em;
	transition:1s ease-in-out;
}
#box3{
	width:10%;
	border:2px solid green;
	text-align:center;
	display:inline-block;
	margin:4em;
	transition:1s ease-in-out;
}
#box4{
	width:10%;
	border:2px solid orange;
	text-align:center;
	display:inline-block;
	margin:4em;
	transition:1s ease-in-out;
}
/*animation*/
#box1:hover{
		-webkit-transform:translate(2em,2em);
		-ms-transform:translate(2em,2em);
		-moz-transform:translate(2em,2em);
		-o-transform:translate(2em,2em);
    transform:translate(2em,2em);
	}
	#box2:hover{
		-webkit-transform:rotate(75deg);
		-ms-transform:rotate(75deg);
		-moz-transform:rotate(75deg);
		-o-transform:rotate(75deg);
	   transform:rotate(75deg);
	}
	#box3:hover{
		-webkit-transform:skew(30deg,40deg);
		-ms-transform:skew(30deg,40deg);
		-moz-transform:skew(30deg,40deg);
		-o-transform:skew(30deg,40deg);
	   transform:skew(30deg,40deg);
	}
	#box4:hover{
		-webkit-transform:scale(2,3);
		-ms-transform:scale(2,3);
		-moz-transform:scale(2,3);
		-o-transform:scale(2,3);
	   transform:scale(2,3);
	}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.