<div class="container">
  <!-- Checkbox for manipulation   --> 
  <input type="checkbox" id="switch" name="switch">
  
  <div class="card-wrapper">
    <div class="card-front">
        <div class="card-links">
          <span class="fa fa-instagram"></span>
          <span class="fa fa-link"></span>
        </div>
        <div class="card-user">
          <img src="https://unsplash.it/200/200" alt="User Card by Ashish Mehra"/>
          <span>Ashish Mehra <i>@ashishmehra584</i></span>
          <div class="user-info">
            <span>71<b>Posts</b></span>
            <span>532<b>Followers</b></span>
            <span>451<b>Following</b></span>
          </div>
        </div>
    </div>
    <div class="card-back"></div>
  </div>
  <div class="switch">
    <label for="switch"></label>
  </div>
</div>

/* Default Styles  */

body{
  background:#fff;
  font-family: 'Quicksand', sans-serif;
}

img{
  width:100%;
  height:100%;
  display:block;
}

input{
  display:none;
}

*::selection {
  background: transparent; 
}
*::-moz-selection {
  background: transparent; 
}

/* Pen Style  */

.container{
  padding:15px;
  perspective:700px;
  -webkit-perspective:700px;
}

.card-wrapper{
  position:relative;
  width:250px;
  height:250px;
  margin:60px auto 25px;
  transform-style:preserve-3d;
  transition:transform 0.3s cubic-bezier(0,1.06,.75,1.31);
}

.card-front,
.card-back{
  position:absolute;
  width:100%;
  height:100%;
  border-radius:0.55em;
}

.card-front{
  background: #FF8008; 
  background: -webkit-linear-gradient(to right, #FFC837, #FF8008); 
  background: linear-gradient(to right, #FFC837, #FF8008); 
}

.card-front span{
  transition:700ms ease-in;
}

.card-back{
  background:#fff;
  box-shadow: 0 10px 50px rgba(0,0,0,0.5);
  transform:translateZ(0);
  z-index:-1;
}

.card-links{
  padding:15px;
  transition: all 700ms ease-in; 
}

.card-links span{
  color:#fff;
  font-size:22px;
}

.card-links span:last-child{
  float:right;
}

.card-user{
  transform-style:preserve-3d;
  transition: all 700ms cubic-bezier(0,1.06,.75,1.31); 
}

.card-user img{
  width:75px;
  height:75px;
  border-radius:50%;
  margin: 0 auto;
  border:2px solid #fff;
  transition: all 700ms ease-in;
}

.card-user span{
  font-size:16px;
  text-align:center;
  display:block;
  margin-top:10px;
  color:#fff;
}

.card-user span>i{
  font-family: 'Pacifico', cursive;
  display:block;
  font-size:8px;
}

/* In card-user div  */
.user-info{
  display:flex;
  flex-wrap:nowrap;
  padding:10px 5px;
}

.user-info span{
  flex:1;
  font-size:12px;
}

.user-info span>b{
  display:block;
}

/* Switch  */
.switch{
  width:70px;
  height:35px;
  margin: 50px auto;
}

.switch label{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  background:#fff;
  box-shadow: -2px 10px 35px rgba(0,0,0,0.5);
  border-radius:12em;
  box-sizing:border-box;
  transition:300ms ease-in-out;
}

.switch label:after{
  position:absolute;
  content:"";
  width:25px;
  height:25px;
  margin:5px;
  left:0;
  background:#f8b500;
  border-radius:50%;
  transition:all 300ms ease-in;
}

/* Interactions */

input:checked ~ .switch>label{
  background:#f8b500;
}

input:checked ~ .switch>label:after{
  background:#fff;
  left:50%;
}

input:checked ~ .card-wrapper{
   transform:rotateX(35deg) scale(1.125);
}

input:checked ~ .card-wrapper span{
  text-shadow: 0 7px 5px rgba(0,0,0,0.2);
}

input:checked ~ .card-wrapper .card-front{
  animation: scaleAnim 7s ease-in infinite;
}

input:checked ~  .card-wrapper .card-user img{
  box-shadow: 0 10px 5px rgba(0,0,0,0.3);
}

/* Animation for scale  */
@keyframes scaleAnim{
  0% {
      transform:translateZ(55px);
  }
  25%{
    transform:translateZ(45px);
  }
  50%{
    transform:translateZ(35px);
  }
  75%{
    transform:translateZ(45px);
  }
  100%{
    transform:translateZ(55px);
  }
}