HTML
<div class="scene">
<div class="canvas">
<div class="poster">
<div class="poster-title">CSS GLASS</div>
<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 id="linearGradient-1" x1="50%" y1="0%" x2="50%" y2="100%">
<stop stop-color="#CB1F3F" offset="0%"></stop>
<stop stop-color="#000000" offset="100%"></stop>
</lineargradient>
<lineargradient id="linearGradient-2" x1="50%" y1="0%" x2="50%" y2="100%">
<stop stop-color="#B96EC4" offset="0%"></stop>
<stop stop-color="#3B7292" offset="100%"></stop>
</lineargradient>
<lineargradient id="linearGradient-3" x1="95.0498057%" y1="2.12400981%" x2="62.2385825%" y2="78.884625%">
<stop stop-color="#50618C" offset="0%"></stop>
<stop stop-color="#C75656" offset="100%"></stop>
</lineargradient>
</defs>
<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>
<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>
<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"></rect>
</g>
</svg>
</div>
<div class="title">Hover/touch to rotate
<div class="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.</div>
</div>
<div class="glass"></div>
<div class="frame-left-inner">
<div class="frame-left-surface">
<div class="frame-left-outter"></div>
</div>
</div>
<div class="frame-right-inner">
<div class="frame-right-surface">
<div class="frame-right-outter"></div>
</div>
</div>
<div class="frame-top-inner">
<div class="frame-top-surface">
<div class="frame-top-outter"></div>
</div>
</div>
<div class="frame-bottom-inner">
<div class="frame-bottom-surface">
<div class="frame-bottom-outter"> </div>
</div>
</div>
</div>
</div>
SCSS
$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%);
}
JAVASCRIPT
(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(' ');
};
})();
