<div class="spinning-letters">
	HOVER
</div>

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

.spinning-letters {
	display : inline-block;
	font    : 400 150px/150px 'Voltaire';
	color   : #099;
	}

.spinning-letters span {
	display    : inline-block;
	position   : relative;
	transition : 0.8s;
	transform  : rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}

.spinning-letters:hover {
	cursor : default;
	}

.spinning-letters:hover span:nth-child(odd) {
	transform : rotateX(0deg) rotateY(0deg) rotateZ(-360deg);
	}

.spinning-letters:hover span:nth-child(even) {
	transform : rotateX(0deg) rotateY(0deg) rotateZ(360deg);
	}



/* If you want to transform each letter individually, this is the code :

.spinning-letters:hover span:nth-child(1) {
	transform : rotateX(0deg) rotateY(0deg) rotateZ(-360deg);
	}

.spinning-letters:hover span:nth-child(2) {
	transform : rotateX(0deg) rotateY(0deg) rotateZ(360deg);
	}

.spinning-letters:hover span:nth-child(3) {
	transform : rotateX(0deg) rotateY(0deg) rotateZ(-360deg);
	}

.spinning-letters:hover span:nth-child(4) {
	transform : rotateX(0deg) rotateY(0deg) rotateZ(360deg);
	}

.spinning-letters:hover span:nth-child(5) {
	transform : rotateX(0deg) rotateY(0deg) rotateZ(-360deg);
	}

*/

(function($) {

	// Example usage: jQuery(".selector").spanLetters(); 
	$.fn.spanLetters = function() {

		// Loop through each element on which this function has been called
		this.each( function() {   

			// Make an array with each letter of the string as a value
			var 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
			var text = words.join('');

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

		})

	}

}(jQuery));

$('.spinning-letters').spanLetters();