<div class="container"><div class="text"></div></div>

<!-- TYPE SOME TEXT INTO THE 'someText' DIV -->
<span class="someText">I like big butts and i cannot lie</span>

$multiplyer: 9;
$endPos: 261;

* {
  box-sizing: border-box;
}

html {
  font-size: 10px;
}
body {
  font-size: 100%;
}
.container {
  display: block;
  width: 100rem;
  margin: 10rem auto 0 80rem;
}

.text {
  position: relative;
  font-family: 'Droid Sans Mono';
  span {
    height: 50rem;
    position: absolute;
    width: 3rem;
    left: 0;
    top: 0;
    
    transform-origin: bottom center;
    
    font-size: 3rem;
    text-align: center;
    text-transform: uppercase;
  }
}

.someText {
  display: none;
}

@for $i from 1 through 100 {
  .char#{$i} {
    transform: rotate($endPos + ($i * $multiplyer) + deg);
    animation-name: animateChar#{$i};
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-direction: forward;
    animation-iteration-count: 1;
    animation-play-state: running;
  }
}

@for $k from 1 through 100 {
  @keyframes animateChar#{$k} {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate($endPos + ($k * $multiplyer) + deg);
    }
  }
}

var $textCon = $('.someText');
var text = $textCon.text();
var str = text.split('');

var $sOT = $('.text');

$.each(str, function (index, value) {
  var trueIndex = index + 1;
  var spanClass = 'char' + trueIndex;
  
  $sOT.append('<span class='+spanClass+'>' + value + '</span>');
});