SOURCE

<ul class="Words">
    <li class="Words-line">
      <p>&nbsp;</p>
      <p>CSS Only</p>
    </li>
    <li class="Words-line">
      <p>CSS Only</p>
      <p>Perspective</p>
    </li>
</ul>

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:900');
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
body {
  color: #FFFFFF;
  display: flex;
}
.Words {
  margin: 0 auto;
  padding: 80px 0;
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 68px;
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: uppercase;
  transform: translate3d(0, 0, 0);
}
.Words-line {
  position: relative;
  /* height: 50px; */
  /* overflow: hidden; */
  border: 1px solid red;
}
.Words-line:nth-child(odd) {
  transform: skew(60deg, -30deg) scaleY(0.66667);
}
.Words-line:nth-child(even) {
  transform: skew(0deg, -30deg) scaleY(1.33333);
}
.Words-line:nth-child(1) {
  left: 29px;
}
.Words-line:nth-child(2) {
  left: 58px;
}
p {
  height: 50px;
  line-height: 45px;
  padding: 0 10px;
  transition: all .4s ease-in-out;
  transform: translate3d(0, 0, 0);
  border: 1px solid blue;
}
.Words:hover p {
  transform: translate3d(0, -50px, 0);
}