style.css

body {
  perspective: 3000;
  overflow: hidden;
}
#face {
  margin: 0;
  padding: 0;
  width: 320px;
  height: 400px;
  transform: rotateX(60deg) rotateZ(-50deg);
  transform-style: preserve-3d;
  transition: all 2s;
  position: absolute;
  top: 0; left: 0; right: 0;
  margin: auto;
}
#face:hover {
  transform: rotateX(0deg) rotateZ(0deg);
}
#content {
  width: 320px;
  height: 375px;
  padding: 15px 0px;
  background: linear-gradient(to bottom, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%);
  transform-style: preserve-3d;
  text-align: center;
}
#content:before,#content:after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: inherit;
}
#content:before {
  transform-origin: left center;
  transform: rotateY(90deg);
  width: 15px;
}
#content:after {
  transform-origin: bottom center;
  transform: rotateX(90deg);
  height: 15px;
  top: auto; bottom: 0;
  background-position: bottom center;
}

p input[type="text"], p textarea {
  width: 258px;
  font-size: 18px;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #fff;
}
p input[type="text"] {
  height: 24px;
}
p textarea {
  height: 100px;
  resize: none;
}
p input[type="button"] {
  width: 278px;
  border: 4px solid #fff;
  background-color: #51A8FF;
  color: #fff;
  font-size:24px;
  padding: 14px 0px;
  font-weight:700;
  transition: all 0.5s;
}
p input[type="button"]:hover {
  background: #9ECEFF;
  color: #222;
}
p input:focus, textarea:focus {
  outline: 4px solid #007FFF;
}