3D Sliding Text Using CSS 2D Transforms

Preview:

Description:

A pretty cool hover-triggered 3D text sliding effect built using CSS3 2D transforms (skew and scale methods).

How to use it:

1. Add text to the page.

<!-- container div to apply hover effect to all the children elements -->
<div class="perspective-container">                                                
  <div class="perspective-text">
    <!-- leave this blank as it will hide once you move up the next text -->
    <p>&nbsp;</p>                                                              
    <p>NOWHERE</p>
  </div>
  <div class="perspective-text">
    <p>NOWHERE</p>
    <p>NOW HERE</p>
  </div>
  <div class="perspective-text">
    <p>NOW HERE</p>
    <p>it's just a </p>
  </div>
  <div class="perspective-text">
    <p>it's just a </p>
    <p>matter of </p>
  </div>
  <div class="perspective-text">
    <p>matter of </p>
    <p>PERSPECTIVE.</p>
  </div>
  <div class="perspective-text">
    <p>PERSPECTIVE.</p>
    <!-- leave this blank as it will take the last position once you move up the just previous text -->
    <p>&nbsp;</p>                                                              
  </div>
</div>

2. Apply the 3D sliding effect to the text.

.perspective-container {
  color: white;
  font-size: 58px;
  font-weight: 900;
  letter-spacing: -4px;
  text-transform: capitalize;
}
.perspective-text {
  height: 70px;
  overflow: hidden;
  position: relative;
}
p {
  margin: 0;
  height: 70px;
  /*adds extra padding to each line*/
  line-height: 40px;                               
  transition: all 0.5s ease-in-out;
}
.perspective-text:nth-child(odd) {
  /*skew(x-axes, y-axes) and scaleY downwards*/
  transform: skew(60deg, -30deg) scaleY(0.667);           
}
.perspective-text:nth-child(even) {
  transform: skew(0deg, -30deg) scaleY(1.333);
}
.perspective-container:hover p {
  transform: translate(0, -50px);
}
/*move each child towards left by 29px to create the effect*/
.perspective-text:nth-child(1) {
  left: 29px;
}
.perspective-text:nth-child(2) {
  left: 58px;
}
.perspective-text:nth-child(3) {
  left: 87px;
}
.perspective-text:nth-child(4) {
  left: 116px;
}
.perspective-text:nth-child(5) {
  left: 145px;
}
.perspective-text:nth-child(6) {
  left: 174px;
}