Perspective / door

HTML

<div id="slider" class="slider">
    <div class="knob">
        <div class="innerKnob"></div>        
    </div>
</div>

<div id="box">
    <div class="inner">
        <p>adasdasd
            asdasdadun</p>
        <input type="text" />
        <input type="radio" />
        <span id="shadow"></span>
    </div>
</div>

CSS

body {
    background: #444;
}

#box {
    height: 200px;
    width: 100%;
    position: relative;
    left: -40%;
    -webkit-transform: 10ms ease-in;
}

.inner {
    height: 100%;
    width: 100%;
    margin-left: 50%;
    
    background: #fff;
    position: relative;
}

#shadow {
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    background: -webkit-linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.0) 100%);
}

.slider {
    background: #CCC;
    height: 0px;
    width: 100%;
}
    .slider .knob {
        width: 1px;
        height: 1px;
        z-index: 30;
        cursor: move;
    }

    .slider .innerKnob {
        background: red;
        width: 100px;
        height: 67px;
    }

JavaScript

var box = document.id('box');
var inner = box.getElement('.inner');
var step = 0;
var shadow = document.id('shadow');
var slider = document.id('slider');

box.setStyle('height', document.body.getSize().y);

new Slider(slider, slider.getElement('.knob'), {
    range: [0, 100],
    initialStep: 0,
    onComplete: function() {
        if (step > 50) {
            this.set(90);
        } else {
            this.set(0);
            shadow.hide();
        }
    },
    onChange: function(value) {
        step = value;
        console.log(value-50);
        box.setStyles({
            '-webkit-transform': 'perspective(1000px) rotateY(' + value + 'deg)',
            'left': value-50 + '%'
        });
        shadow.setStyles({
            'opacity': value / 100,
            'display': 'block'
        });
        inner.setStyles({
            'box-shadow': (900 / value) + 'px 0 40px rgba(0,0,0,0.4)'
        });
    }
});