* {
	margin:0px 0px;
}
.con {
	height:40px;
	line-height:40px;
	text-align:center;
	transform-style:preserve-3d;
}
.div1 {
	width:100px;
	height:38px;
	display:inline-block;
	border:1px solid #000000;
	margin:0px 0px;
	position:relative;
	transition:0.5s;
	background-color:red;
	transform-style:preserve-3d;
}
.di2 {
	position:absolute;
	width:100px;
	height:38px;
	border:1px solid #000000;
	top:0px;
	left:0px;
	text-align:center;
	transform:translateY(20px) translateZ(20px) rotateX(90deg);
	background-color:aqua;
}
.div1:hover {
	transform:translateY(-20px) rotateX(-90deg);
}