*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body{
	background:#f2f3f7;
}

.container{
	width:90%;
	margin:auto;
	min-height:100vh;
	display:flex;
	justify-content:space-around;
	align-items:center;
	transform-style:preserve-3d;
	transform-origin:center;
	perspective:2000px;
}

.card{
	flex-basis:20%;
	box-shadow:5px 6px 10px grey;
	transform:rotateX(60deg);
	transition: transform 1s;
}

.card img{
	width:100%;
}

.content{
	padding:20px 10px;
	background:white;
	color:black;
}

.card1:hover{
	transform:rotateX(0deg) translateZ(300px);
}

.card2:hover{
	transform:rotateX(0deg)rotateY(360deg) translateZ(300px);
}

.card3:hover{
	transform:rotateX(360deg) translateZ(300px);
}