Untitled

<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var yAngle = 0;
    var xAngle = 0;
	document.onkeydown = checkKey;
	function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '39') {
        yAngle = yAngle+5;
        $("section").css("transform",'rotateY('+yAngle+'deg)');
    }
	if (e.keyCode == '37'){
	    yAngle = yAngle-5;
        $("section").css("transform",'rotateY('+yAngle+'deg)');
	}
	if (e.keyCode == '38'){
	    xAngle = xAngle+5;
        $("section").css("transform","rotateX("+xAngle+"deg)");
	}
	if (e.keyCode == '40'){
	    xAngle = xAngle-5;
        $("section").css("transform",'rotateX('+xAngle+'deg)');
	}
	}
    $("#button_left").click(function(){
        yAngle = yAngle-5;
        $("section").css("transform",'rotateY('+yAngle+'deg)');
    });

    $("#button_right").click(function(){
        yAngle = yAngle+5;
        $("section").css("transform","rotateY("+yAngle+"deg)");
    });
	$("#button_down").click(function(){
        xAngle = xAngle-5;
        $("section").css("transform",'rotateX('+xAngle+'deg)');
    });

    $("#button_up").click(function(){
        xAngle = xAngle+5;
        $("section").css("transform","rotateX("+xAngle+"deg)");
    });
});
</script>

<style>

.buttons {
    align: center;
}
.wrap {
	perspective: 800px;
	perspective-origin: 50% 50%;
}
.cube {
    margin: 0 auto;
	position: relative;
	width: 200px;
	height: 200px;
	transform-style: preserve-3d;
}
.cube div {
	box-shadow: inset 0 0 20px rgba(125,125,125,1);
	position: absolute;
	width: 200px;
	height: 200px;
}
.back {
    background: rgba(189,25,400,0.3);
	transform: translateZ(-100px) rotateY(180deg);
}
.right {
    background: rgba(189,25,400,0.3);
	background-repeat: no-repeat;
	background-position: center center;
	transform: rotateY(-270deg) translateX(100px);
	transform-origin: top right;
}
.left {
    background: rgba(189,25,400,0.3);
	transform: rotateY(270deg) translateX(-100px);
	transform-origin: center left;
}
.top {
    background: rgba(189,25,400,0.3);
	transform: rotateX(-90deg) translateY(-100px);
	transform-origin: top center;
}
.bottom {
    background: rgba(189,25,400,0.3);
	transform: rotateX(90deg) translateY(100px);
	transform-origin: bottom center;
}
.front {
    background: rgba(189,25,400,0.3);
	transform: translateZ(100px);
}

</style>

<script type="text/javascript">
var zoom=1;
var val;
function zoomings(){
                val=document.getElementById("zooming").value;
                cube.style.zoom=val;
                cube.style.moz.zoom=val;
            }

if (document.addEventListener) {
    document.addEventListener("mousewheel", MouseWheelHandler(), false);
    document.addEventListener("DOMMouseScroll", MouseWheelHandler(), false);
} else {
    sq.attachEvent("onmousewheel", MouseWheelHandler());
}


function MouseWheelHandler() {
    return function (e) {
        // cross-browser wheel delta
        var e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

        //scrolling down?
        if (delta < 0) {
		    if (zoom > 0.3)
			{zoom=zoom-0.05;}
            cube.style.zoom=zoom;
            cube.style.moz.zoom=zoom;
        }

        //scrolling up?
        if (delta > 0) {
		    if (zoom<1.8)
		    {zoom=zoom+0.05;}
            cube.style.zoom=zoom;
            cube.style.moz.zoom=zoom;
        }
        return false;
    }
}
</script>
<script>
function addphotos() {
    right.style.background-image=document.getElementById("image1");
    }

</script>
</head>

<body><br>
<div align="center" class="buttons">
<input type="button" value="<--" id="button_left">
<input type="button" value="-->" id="button_right">
<input type="button" value="down" id="button_down">
<input type="button" value="up" id="button_up">

<span>Zoom: </span><select id='zooming' onchange="zoomings()">
        <option value="0.25">25%</option>
        <option value="0.5">50%</option>
        <option value="0.75">75%</option>
        <option value="1" selected="selected">100%</option>
        <option value="1.5">150%</option>
        <option value="1.75">175%</option>
    </select></div>

<br><br><br><br><br><br><br>
<div class="wrap">
	<section class="cube" id="cube">
		<div class="front" id="front"></div>
		<div class="back" id="back"></div>
		<div class="top" id="top"></div>
		<div class="bottom" id="bottom"></div>
		<div class="left" id="left"></div>
		<div class="right" id="right"></div>
	</section>
</div>
<div align="left">
<form>
<input type="file" name='image1' id='image1'><br>
<input type="file" name='image2' id='image2'><br>
<input type="file" name='image3' id='image3'><br>
<input type="file" name='image4' id='image4'><br>
<input type="submit" name="Submit" onclick="addphotos()" value="Submit"></input>
</form>
</div>

</body>
</html>