Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.container{
	width: 100%;
	height: 100vh;
	background: #e5e5e5;
	color: #e5e5e5;
}
#box{
	position: absolute;
	top: 33%;
	left: 20%;
	width: 64%;
	height: 20%;
	background: #e5e5e5;
	font-size: 50px;
	font-family: Arial;
	text-shadow: 1px 1px 1px rgba(0,0,0,1),-1px -1px 1px white;
	text-align: center;
	box-shadow: inset -10px -10px 10px white,inset 10px 10px 15px gray;
	transform-style: preserve-3d;
	transform-origin: bottom;
	transform: perspective(1000px) rotateX(75deg);
	transition: 5s;
}
#box:hover{
	transform-style: preserve-3d;
	transform-origin: bottom;
	transform: rotateX(0deg);
	color: black;
	text-shadow: 1px 1px 2px red;
	transition: 5s;
}
#display{
	width: 64%;
	height: 20%;
	background: #e5e5e5;
	box-shadow: inset 10px 10px 15px gray,inset -10px -10px 15px white;
	position: absolute;
	bottom: 27%;
	left: 20%;
	font-size: 120px;
	text-shadow: 3px 3px 2px gray,-3px -3px 3px white;
	text-align: center;
	letter-spacing: 10px;
	transition: 3s;
}
#display:hover{
	color: black;
	text-shadow: 1px 1px 2px red;
	border: 1px solid black;
	transform: rotateX(0deg);
	transition: 3s;
}
.container:active{
	background: linear-gradient(90deg,#00dbde,#3a7bd5);
}
.container:active #box{
	background: linear-gradient(90deg,#3a7bd5,#00dbde) 874px;
	box-shadow: none;
	border-radius: 30px 30px 0px 0px;
}
.container:active #display{
	background: linear-gradient(90deg,#3a7bd5,#00dbde) 874px;
	box-shadow: none;
	border-radius: 0px 0px 30px 30px;
	color: black;
	text-shadow: 3px 3px 3px red;
}

Frontend Forever App