<div class="card">
  <div class="front">
    <div class="blue"></div>
    <div class="border"></div>
    <div class="info">
      <h1>Joshua Hibbert</h1>
      <h2>Web designer</h2>
    </div>
  </div>
  <div class="back">
    <div class="links">
      <a class="website" href="http://joshnh.com">Website</a><!--
   --><a class="twitter" href="https://twitter.com/_joshnh">Twitter</a><!--
   --><a class="instagram" href="http://instagram.com/joshnh">Instagram</a><!--
   --><a class="dribbble" href="https://dribbble.com/joshnh">Dribbble</a><!--
   --><a class="strava" href="http://app.strava.com/athletes/304149">Strava</a><!--
   --><a class="github" href="https://github.com/joshnh">GitHub</a>
    </div>
  </div>
  <!--<div class="shadow"></div>-->
</div>

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,300italic);

body {
  background-color: #eee;
  color: #444;
  font-family: Lato;
}
.card {
  height: 320px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: .75s;
  width: 427px;
}
.front {
  backface-visibility: hidden;
  background-color: #fff;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: perspective(1000px) rotateX(0deg);
  transform-style: preserve-3d;
  transition: .75s;
}
.card:hover .front {
  transform: perspective(1000px) rotateX(180deg);
}
.blue {
  backface-visibility: hidden;
  background-color: #6cf;
  bottom: 38px;
  left: 8px;
  position: absolute;
  top: 38px;
  transform: translateZ(36px);
  transform-style: preserve-3d;
  width: 86px;
}
.blue:after {
  backface-visibility: hidden;
  background-color: #f6f6f6;
  content: '';
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateZ(-36px);
}
.border {
  backface-visibility: hidden;
  background-color: transparent;
  border: 12px solid #ddd;
  bottom: 38px;
  left: 128px;
  position: absolute;
  right: 42px;
  top: 38px;
  transform: translateZ(36px);
  transform-style: preserve-3d;
}
.border:after {
  backface-visibility: hidden;
  content: '';
  border: 12px solid #f6f6f6;
  bottom: -12px;
  left: -12px;
  position: absolute;
  right: -12px;
  top: -12px;
  transform: translateZ(-36px);
}
.info h1 {
  backface-visibility: hidden;
  font-size: 28px;
  font-weight: 400;
  left: 162px;
  line-height: 1;
  position: absolute;
  top: 156px;
  transform: translateZ(36px);
  transform-style: preserve-3d;
}
.info h1:after {
  backface-visibility: hidden;
  color: #f4f4f4;
  content: 'Joshua Hibbert';
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateZ(-36px);
}
.info h2 {
  backface-visibility: hidden;
  color: #999;
  font-size: 20px;
  font-style: italic;
  font-weight: 300;
  left: 162px;
  line-height: 1;
  position: absolute;
  top: 192px;
  transform: translateZ(36px);
  transform-style: preserve-3d;
}
.info h2:after {
  backface-visibility: hidden;
  color: #eee;
  content: 'Web designer';
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateZ(-36px);
}
.back {
  backface-visibility: hidden;
  background-color: #fff;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: perspective(1000px) rotateX(180deg);
  transform-style: preserve-3d;
  transition: .75s;
}
.card:hover .back {
  transform: perspective(1000px) rotateX(360deg);
}
.links {
  margin-left: 38px;
  margin-top: 38px;
}
.links a {
  backface-visibility: hidden;
  color: #fff;
  display: inline-block;
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 24px;
  margin-right: 24px;
  padding: 23px 0;
  text-align : center;
  text-decoration: none;
  transform: translateZ(37px);
  transform-style: preserve-3d;
  transition: .15s;
  width: 163px;
}
.links a:after {
  backface-visibility: hidden;
  background-color: #eee;
  content: '';
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateZ(-36px);
  transition: .15s;
}
.links a:hover {
  transform: translateZ(48px);
}
.links a:hover:after {
  transform: translateZ(-48px);
}
.website {
  background-color: #f66;
}
.twitter {
  background-color: #019ad2;
}
.instagram {
  background-color: #517fa4;
}
.dribbble {
  background-color: #ea4c89;
}
.github {
  background-color: #4183c4;
}
.strava {
  background-color: #fc4c02;
}
.shadow {
  background-color: #e8e8e8;
  content: '';
  bottom: 36px;
  left: 24px;
  pointer-events: none;
  position: absolute;
  right: 24px;
  top: 36px;
  transform: perspective(1000px) rotateX(0deg) translateZ(-192px);
  transform-style: preserve-3d;
  transition: .75s;
}
.card:hover .shadow {
  transform: perspective(1000px) rotateX(180deg) translateZ(192px);
}