<div id="pillar">

<div class="row">
  <div class="wrap">
    <div class="left">Art is pointless</div>
    <div class="right">without passion</div>  
    </div>
</div>
  
  <div class="row">
  <div class="wrap">
    <div class="left">You have to go out</div>
    <div class="right">and create art.</div>  
    </div>
</div>
  
  <div class="row">
  <div class="wrap">
    <div class="left">get an actual job</div>
    <div class="right">doing what you love</div>  
    </div>
</div>
  
   <div class="row">
  <div class="wrap">
    <div class="left">and make a living</div>
    <div class="right">by being yourself</div>  
    </div>
</div>
  
  <div class="row">
  <div class="wrap">
    <div class="left">you can't just let</div>
    <div class="right">other people define</div>  
    </div>
</div>
  
  <div class="row">
  <div class="wrap">
    <div class="left">the rest of your life</div>
    <div class="right">and say you will</div>  
    </div>
</div>
  
  <div class="row">
  <div class="wrap">
    <div class="left">be a joke, a failure.</div>
    <div class="right">follow your heart.</div>  
    </div>
</div>
  
  <div class="row">
  <div class="wrap">
    <div class="left">you will end up</div>
    <div class="right">happy and free, not</div>  
    </div>
</div>
  
  <div class="row">
  <div class="wrap">
    <div class="left">a starving artist.</div>
    <div class="right">love you art and</div>  
    </div>
</div>
  
  <div class="row">
  <div class="wrap">
    <div class="left">contribute to society</div>
    <div class="right">by inspiring people</div>  
    </div>
</div>
  
  <div class="row">
  <div class="wrap">
    <div class="left">instead of wasting time</div>
    <div class="right">letting other tell you</div>  
    </div>
</div>
  
  <div class="row">
  <div class="wrap">
    <div class="left">you're worthless</div>
    <div class="right">you can change the world.</div>  
    </div>
</div>
  
  
  </div>

* {box-sizing: border-box; font-family: 'Spartan', ;}

body {background: #ff00cc;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #333399, #ff00cc);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #333399, #ff00cc); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}



#pillar {display: block; margin: 100px auto; width: 300px; transform: translateX(-200px); 
 perspective: 1900px;
}

.wrap {display: flex; transform: rotateY(0deg);
transition: all 1.0s cubic-bezier(.25,.8,.25,1);
   transform-style: preserve-3d;
}

.row {
  width: 800px;
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: all 3.0s cubic-bezier(.25,.8,.25,1);
  &:hover .wrap {transform: rotateY(-45deg);
  cursor: pointer;
  }
  &:hover {z-index: 1;}
  &:hover .left {
    
    &:before {
      width: 55%;
    }
  }

  .left { width: 400px; padding: 15px 20px; text-align: right;
    
  transform-style: preserve-3d;
  transform: rotateY(0deg);
    &:before {content: "";
       position: absolute; display: block; top:0; left:0; width: 50%; height: 100%;
      transition: width 1s ease-in-out;
    }
    
  }
  .right { width: 400px; padding: 15px 20px;
  text-align: left;
    transform: rotateY(90deg);
  transform-origin: left center;
    transform-style: preserve-3d;
     backface-visibility: hidden;
  }

}

//inspiration: https://i.redd.it/2wq132as1kj41.jpg