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



.card {
  width: 900px;
  height: 550px;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-perspective: 1200px;
  perspective: 1200px;
  transition: 2s;
}
.card:hover {
  transform: rotate(-5deg);
}
.card:hover .outside {
  transform: rotateY(-130deg);
}
.outside,
.inside {
  height: 100%;
  width: 50%;
  position: absolute;
  left: 50.1%;
}
.inside {
  background: linear-gradient(to right, #e7e7e7, #ffffff 30%);
  line-height: 1;
  padding: 0 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  left: 50%;
  color: orange
}

  
.outside {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  z-index: 1;
  transform-origin: left;
  transition: 2s;
  cursor: pointer;
}
body {
  background-image: url('https://scontent-ord5-2.xx.fbcdn.net/v/t1.6435-9/62590568_2266703940073401_4390913055756648448_n.jpg?_nc_cat=111&ccb=1-7&_nc_sid=cf85f3&_nc_ohc=Eh7Nd7pBUWQQ7kNvwH39gWi&_nc_oc=AdkQiD4usDDISW_IJBRKtpRNJArVHTIJVXQPaIdeRoMKAuTT9o2RlYRQ-gLDgVzhrZf02APx4kmUWEv2O4DnDKbi&_nc_zt=23&_nc_ht=scontent-ord5-2.xx&_nc_gid=5NmNbXSqPL8jvADUf2uGuQ&oh=00_AfMLig3INJQ-Ibrdjjd-RkYHBGHT8BFTnc1eAtqrH4GrFw&oe=6875E814');
}
.front,
.back {
  height: 100%;
  width: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateX(0deg);
}
.front {
  background-color: #ffffff;
}
.back {
  transform: rotateY(180deg);
  background: linear-gradient(to left, #e7e7e7, #ffffff 30%);
}
.outside p {
  font-size: 20px;
  margin-top: 30px;
  text-align: center;
  letter-spacing: 2px;
  color: orange;
}
.inside h1 {
  font-size: 120px;
  line-height: 120px;
}