<div class="the-goods">Transform</div>

@import url(https://fonts.googleapis.com/css?family=Righteous);

body { 
  background-color: #EEE;
}

.the-goods {
  font-size: 160px;
  text-align: center;
  margin: 60px auto 0px;
  text-transform: uppercase;
  font-weight: 700;
  font-family: Righteous;
  color: white;
  max-width: 1150px;
}

.the-goods span {
  text-shadow: -1px 0 0px #FFADDA, 0 1px 0px #F99ACD, -2px 1px 0px #FFADDA, -1px 2px 0px #F99ACD, -3px 2px 0px #FFADDA, -2px 3px 0px #F99ACD, -4px 3px 0px #FFADDA, -3px 4px 0px #F99ACD, -5px 4px 0px #FFADDA, -4px 5px 0px #F99ACD, -6px 5px 0px #FFADDA, -5px 6px 15px #000000;
  display: inline-block;
  position: relative;
  padding: 0px 6px; 
  transition: 0.8s;
  transform: rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg );
}

.the-goods:hover {
  cursor: pointer;
}

.the-goods:hover span:nth-child(odd) { 
  transform: rotateX( 10deg ) rotateY( 10deg ) rotateZ( -370deg ); 
}

.the-goods:hover span:nth-child(even) { 
  transform: rotateX( 10deg ) rotateY( 10deg ) rotateZ( 370deg );
}

/* Use these to do different transforms on each letter
.the-goods:hover span:nth-child(1) { 
  transform: rotateX( 10deg ) rotateY( 10deg ) rotateZ( -370deg ); 
}

.the-goods:hover span:nth-child(2) { 
  transform: rotateX( 10deg ) rotateY( 10deg ) rotateZ( 370deg );
}

.the-goods:hover span:nth-child(3) { 
  transform: rotateX( 10deg ) rotateY( 10deg ) rotateZ( -370deg );  
}

.the-goods:hover span:nth-child(4) { 
  transform: rotateX( 10deg ) rotateY( 10deg ) rotateZ( 370deg ); 
}

.the-goods:hover span:nth-child(5) { 
  transform: rotateX( 10deg ) rotateY( 10deg ) rotateZ( -370deg ); 
}

.the-goods:hover span:nth-child(6){ 
  transform: rotateX( 10deg ) rotateY( 10deg ) rotateZ( 370deg ); 
} 

.the-goods:hover span:nth-child(7) { 
  transform: rotateX( 10deg ) rotateY( 10deg ) rotateZ( -370deg ); 
}

.the-goods:hover span:nth-child(8) { 
  transform: rotateX( 10deg ) rotateY( 10deg ) rotateZ( 370deg ); 
}

.the-goods:hover span:nth-child(9) { 
  transform: rotateX( 10deg ) rotateY( 10deg ) rotateZ( -370deg ); 
}

.the-goods:hover span:nth-child(10) { 
  transform: rotateX( 10deg ) rotateY( 10deg ) rotateZ( 370deg ); 
} */

/* Make it pretty, always */
@media screen and (max-width: 1300px) {
  .the-goods {
    font-size: 140px;
  }
}
@media screen and (max-width: 1100px) {
  .the-goods {
    font-size: 120px;
  }
}
@media screen and (max-width: 900px) {
  .the-goods {
    font-size: 100px;
  }
}
@media screen and (max-width: 749px) {
  .the-goods {
    font-size: 76px;
  }
}
@media screen and (max-width: 600px) {
  .the-goods {
    font-size: 58px;
  }
}
@media screen and (max-width: 500px) {
  .the-goods {
    font-size: 42px;
  }
}

( function( $ ) {

    /**
     * span-letters.js
     * 
     * Example usage: jQuery('.selector').spanLetters();
     */
    $.fn.spanLetters = function() {

        // Loop through each element on which this function has been called
        this.each( function() {   
            
            // Scope the variables
            var words, i, text;
          
            // Make an array with each letter of the string as a value
            words = $( this ).text().split( '' );

            // Loop through the letters and wrap each one in a span
            for ( i = 0; i in words; i++ ) {
                words[i] = '<span class="sl' + ( i + 1 ) + ' span-letter">' + words[i] + '</span>'
            };

            // Join our array of span-wrapped letters back into a string
            text = words.join( '' );

            // Replace the original string with the new string
            $( this ).html( text );
        })
    }
}( jQuery ));

$( ".the-goods" ).spanLetters();