.scene
 
  .canvas
    
    .poster
    
      .poster-title CSS GLASS
      
      svg(viewbox='0 0 280 430', version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', style='background: #28495B;')
        
        defs
          lineargradient#linearGradient-1(x1='50%', y1='0%', x2='50%', y2='100%')
            stop(stop-color='#CB1F3F', offset='0%')
            stop(stop-color='#000000', offset='100%')
          lineargradient#linearGradient-2(x1='50%', y1='0%', x2='50%', y2='100%')
            stop(stop-color='#B96EC4', offset='0%')
            stop(stop-color='#3B7292', offset='100%')
          lineargradient#linearGradient-3(x1='95.0498057%', y1='2.12400981%', x2='62.2385825%', y2='78.884625%')
            stop(stop-color='#50618C', offset='0%')
            stop(stop-color='#C75656', offset='100%')
        
        g(stroke='none', stroke-width='1', fill='none', fill-rule='evenodd')
          rect(fill='url(#linearGradient-1)', opacity='0.433537138', transform='translate(203.000000, 134.000000) rotate(27.000000) translate(-203.000000, -134.000000) ', x='-44', y='-18', width='494', height='304')
          rect(fill='url(#linearGradient-2)', opacity='0.433537138', transform='translate(-28.764935, 151.332182) rotate(46.000000) translate(28.764935, -151.332182) ', x='-317.764935', y='28.3321819', width='578', height='246')
          rect(fill='url(#linearGradient-3)', opacity='0.669610507', transform='translate(387.676103, 35.230771) rotate(513.000000) translate(-387.676103, -35.230771) ', x='74.6761032', y='-50.2138834', width='626', height='170.889308')

    .title Hover/touch to rotate
      .subtitle Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut ornare ante. Vivamus semper ut orci ac vehicula. Nunc dictum dapibus faucibus. Curabitur sit amet interdum quam, at scelerisque tellus.
    
    .glass

    .frame-left-inner
      .frame-left-surface
        .frame-left-outter

    .frame-right-inner
      .frame-right-surface
        .frame-right-outter

    .frame-top-inner
      .frame-top-surface
        .frame-top-outter

    .frame-bottom-inner
      .frame-bottom-surface  
        .frame-bottom-outter  

$frame-height: 430px;
$frame-width: 280px;
$frame-color: rgb(10, 10, 10);

$frame-outside-depth: 15px;
$frame-inside-depth: 4px;
$frame-thickness: 5px;
$reflectiveness: 0.01;

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

.scene {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  perspective: 1000px;
  overflow: hidden;
  user-select: none;
  font-family: 'Lato', sans-serif;
  background: rgb(19, 19, 21);
}

.canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: $frame-width;
  height: $frame-height;
  transform-origin: center center 0px;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d; 
  background: #28495B;
  
  .poster {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
  }
  
  .poster-title {
      position: absolute;
      width: 100px;
      left: 25px;
      bottom: 25px;    
      font-weight: 100;
      color: rgba(255, 255, 255, 0.6);
      font-size: 40px;
      line-height: 45px;
    }
  
  div {
    position: absolute;
    transform-style: preserve-3d;
  }
}

.title {
  position: absolute;
  right: 0;
  font-weight: 100;
  font-size: 12px;
  color: white;    
  transform: translateX(120%);
  
  .subtitle {
    margin-top: 10px;
    width: 110px;
    line-height: 17px;
    font-size: 9px;
    color: rgb(190, 190, 190)
  }
}

.glass {
  position: absolute;
  width: $frame-width;
  height: $frame-height;
    
  transform: translateZ(3px);
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/258608/room.png');
  background-position: 0px 0px;
  opacity: $reflectiveness;
  
}

.frame-left-inner {
  left: 0;
  width: $frame-inside-depth;
  height: $frame-height;  
  transform-origin: left bottom;
  transform: rotateY(-90deg);
  
  background: lighten($frame-color, 5%);
}

.frame-left-surface {
  right: 0;
  width: $frame-thickness;
  height: $frame-height;
  transform-origin: right bottom;
  transform: rotateY(90deg);
  
  background: lighten($frame-color, 10%);  
}

.frame-left-outter {
  top: -$frame-thickness;
  width: $frame-outside-depth;
  height: $frame-height + $frame-thickness * 2;
  transform-origin: left bottom;
  transform: rotateY(90deg);
  
  background: darken($frame-color, 15%);
}

.frame-right-inner {
  right: 0;
  width: $frame-inside-depth;
  height: $frame-height;
  transform-origin: right bottom;
  transform: rotateY(90deg);
  
  background: darken($frame-color, 15%);
}

.frame-right-surface {
  left: 0;
  width: $frame-thickness;
  height: $frame-height;
  transform-origin: left bottom;
  transform: rotateY(-90deg);
  
  background: lighten($frame-color, 10%);
}

.frame-right-outter {
  right: 0;
  top: -$frame-thickness;
  width: $frame-outside-depth;
  height: $frame-height + $frame-thickness * 2;
  transform-origin: right bottom;
  transform: rotateY(-90deg);
  
  background: lighten($frame-color, 15%);
}


.frame-top-inner {
  right: 0;
  width: $frame-width;
  height: $frame-inside-depth;
  transform-origin: right top;
  transform: rotateX(90deg);
  
  background: darken($frame-color, 20%);
}

.frame-top-surface {
  bottom: 0;
  left: -$frame-thickness;
  width: $frame-width + $frame-thickness*2;
  height: $frame-thickness;
  transform-origin: right bottom;
  transform: rotateX(-90deg);
  
  background: lighten($frame-color, 10%);
}

.frame-top-outter {
  width: $frame-width + $frame-thickness * 2;
  height: $frame-outside-depth;
  transform-origin: right top;
  transform: rotateX(-90deg);
  
  background: lighten($frame-color, 20%);
}

.frame-bottom-inner {
  bottom: 0;
  left: 0;
  width: $frame-width;
  height: $frame-inside-depth;
  transform-origin: right bottom;
  transform: rotateX(-90deg);
  
  background: lighten($frame-color, 15%);
}

.frame-bottom-surface {
  top : 0px;
  left: -$frame-thickness;
  width: $frame-width + $frame-thickness * 2;
  height: $frame-thickness;
  transform-origin: right top;
  transform: rotateX(90deg);
  
  background: lighten($frame-color, 10%);
}

.frame-bottom-outter {
  bottom: 0;
  width: $frame-width + $frame-thickness*2;
  height: $frame-outside-depth;
  transform-origin: right bottom;
  transform: rotateX(90deg);
  
  background: darken($frame-color, 20%);
}

(function() {

  var scene = document.getElementsByClassName('scene')[0];
  var canvas = document.getElementsByClassName('canvas')[0];
  var glass = document.getElementsByClassName('glass')[0];

  try {
    document.createEvent("TouchEvent");
    scene.addEventListener('touchmove', onTouchMove);
  } catch (e) {
    scene.addEventListener('mousemove', onMouseMove);
  }

  function onTouchMove(event) {
    event.preventDefault();

    var x = event.touches[0].pageX;
    var y = event.touches[0].pageY;

    updateRotation(x, y);
  }

  function onMouseMove(event) {
    var x = event.x;
    var y = event.y;

    updateRotation(x, y);
  }

  function updateRotation(x, y) {
    var yAxisRotation = (x - (window.innerWidth / 2)) * (80 / window.innerWidth);
    var xAxisRotation = (y - (window.innerHeight / 2)) * (-80 / window.innerHeight);

    var transformations = [
      'translate(-50%, -50%)',
      'rotateY(' + yAxisRotation + 'deg)',
      'rotateX(' + xAxisRotation + 'deg)'
    ];

    glass.style.backgroundPosition = (500 - yAxisRotation * 5 + 'px ') + (xAxisRotation * 5 + 'px');
    canvas.style.transform = transformations.join(' ');
  };

})();