.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  
View Compiled
$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%);
}
View Compiled
(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(' ');
  };

})();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.