CSS Perspective Text Hover

css-perspective-text-hover.markdown

CSS Perspective Text Hover

An experiment using webfonts in combination with CSS 3D transform tools.

A Pen by James Bosworth on CodePen.

License.

index.html

<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>
  <li class="Words-line">
    <p>Perspective</p>
    <p>Text Effect</p>
  </li>
  <li class="Words-line">
    <p>Text Effect</p>
    <p>by</p>
  </li>
  <li class="Words-line">
    <p>by</p>
    <p>James</p>
  </li>
  <li class="Words-line">
    <p>James</p>
    <p>Bosworth</p>
  </li>
  <li class="Words-line">
    <p>Bosworth</p>
    <p>&nbsp;</p>
  </li>
</ul>

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.scss

/* 
** Change this if you need to modify
** the amount of lines displayed
*/
$total-lines: 6;


/*
** Leave these unless you want
** to open a whole can of worms
*/
$left-offset: 29px;
$clip-height: 50px;
$line-height: $clip-height - 5px;


/*
** Set up the experiment
*/
html {
  background-color: #5138BE;
  height: 100%;
}

body {
  color: #FFFFFF;
  display: flex;
}


/*
** Apply styles to the parent element
*/
.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;
  // Sort out nasty text fuzz
  transform: translate3d(0, 0, 0);
  -webkit-font-smoothing: antialiased;
  -webkit-font-kerning: normal;
  -webkit-text-size-adjust: 100%;
}


/*
** Apply common styles to each line of text
*/
.Words-line {
  height: $clip-height;
  overflow: hidden;
  position: relative;
  
  // Change the perspective of each alternating line
  &:nth-child(odd) {
    transform: skew(60deg, -30deg) scaleY(.66667);
  }
  &:nth-child(even) {
    transform: skew(0deg, -30deg) scaleY(1.33333);
  }
  
  // Loop over the total lines and apply a left offset
  @for $i from 1 through $total-lines+1 {
    &:nth-child(#{$i}) {
      left: $left-offset * $i;
    }
  }
}


/*
** Fine-grained text styles
*/
p {
  height: $clip-height;
  line-height: $line-height;
  padding: 0 10px;
  transition: all .4s ease-in-out;
  transform: translate3d(0, 0, 0);
  vertical-align: top;
  white-space: nowrap;
}


/*
** The hover interaction
*/
.Words:hover {
  p {
    transform: translate3d(0, -($clip-height), 0);
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:900" rel="stylesheet" />