SCSS Center Hack from Codepen

index.html

<h1><span>t</span><span>r</span><span>a</span><span>m</span><span>p</span><span>o</span><span>l</span><span>i</span><span>n</span><span>e</span><span>s</span></h1>

script.js

$(function(){
  var x = $(window).width();
  var y = $(window).height();
  
  $(window).mousemove(function(e){
    var xpos = e.pageX;
    var ypos = e.pageY;
    var xpct = 100 - Math.floor(xpos / x * 100);
    var ypct = Math.floor(ypos / y * 100);
    
    $("span").css("transform-origin", xpct + '% ' + ypct + '%');
  });
});

SCSScenterHack.markdown

emrNqa

A Pen by Bennett Feely on CodePen.

License.

style.scss

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,300);

$strength : 180;
$shade : 40%;
$letters : 11;
$size : 14vw;
$background : desaturate(navy, 80%);

html, body { height: 100%; }
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: 
    radial-gradient(
      $background,
      shade($background, 40%)
    );
  overflow: hidden;
  cursor: -webkit-grab;
  font: 900 $size Open Sans;
  line-height: $strength * 1vh;
  letter-spacing: -$size*.15;
  text-transform: uppercase;
  text-shadow: 0 2px 15px $background;
}


span {
  display: inline-block;
  position: relative;
  
  @for $i from 1 through ceil($letters/2) {
   &:nth-child(#{$i}) {
     $z : ceil($letters/2) - $i;
     z-index: $z;
   } 
  }
  
  @for $i from 1 through ceil($letters/2) {
    &:nth-child(#{$i}),
    &:nth-last-child(#{$i}) {
      $color : adjust-hue(red, 31% * $i);
      $shade : shade($color, 30%);
      transform: 
        rotateX($i*8deg);
      color: $color;
      
    }
  }
}