3D slider

by doug65536

HTML

<button>Rotate!</button>
<div id="fps">&nbsp;</div>
<div class="images">
    <div class="image3"><img src="http://placehold.it/800x250&amp;text=Test 1"/></div>
    <div class="image3 hidden">Test2</iframe></div>
    <div class="image3 hidden">Test3</div>
    <div class="image3 hidden"><img src="http://placehold.it/800x250&text=Chrome"/></div>
    <!--img class="image3 hidden" src="http://placehold.it/800x250&text=Test 3"/>
    <img class="image3 hidden" src="http://placehold.it/800x250&text=Test 4"/>
    <img class="image3 hidden" src="http://placehold.it/800x250&text=Test 5"/>
    <img class="image3 hidden" src="http://placehold.it/800x250&text=Test 6"/>
    <img class="image3 hidden" src="http://placehold.it/800x250&text=Test 7"/>
    <img class="image3 hidden" src="http://placehold.it/800x250&text=Test 8"/>
    <img class="image3 hidden" src="http://placehold.it/800x250&text=Test 9"/>
    <img class="image3 hidden" src="http://placehold.it/800x250&text=Test 10"/>
    <img class="image3 hidden" src="http://placehold.it/800x250&text=Test 11"/>
    <img class="image3 hidden" src="http://placehold.it/800x250&text=Test 12"/-->
</div>

CSS

html,body {
    position: relative;
    height: 100%;
    width: 100%;
}

.hidden {
    display: none;
}

.images {
    position: relative;
    
    height: 100%;

    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style:    preserve-3d;
    -ms-transform-style:     preserve-3d;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    
    perspective: 600px;
    -webkit-perspective: 600px;
    -ms-perspective: 600px;
}
.image3 {
    position: absolute;
    
    top: 10%;
    width: 800px;
    height: 400px;
    background: grey;
    
    transform-origin: center center;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
}

.image3 iframe, .image3 img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

JavaScript

$(function() {
    "use strict";
    
    function Vec3(x,y,z) {
        if (this !== window) {
            this.x = x;
            this.y = y;
            this.z = z;
            return this;
        }
        return new Vec3(x,y,z);
    }
    Vec3.prototype = {
        set: function(x, y, z) {
            if (x !== undefined)
                this.x = x;
            if (y !== undefined)
                this.y = y;
            if (z !== undefined)
                this.z = z;
            return this;
        },
        add: function(rhs) {
            return new Vec3(this.x + rhs.x, this.y + rhs.y, this.z + rhs.z);
        },
        add_inplace: function(rhs) {
            this.x += rhs.x;
            this.y += rhs.y;
            this.z += rhs.z;
            return this;
        },
        sub: function(rhs) {
            return new Vec3(this.x - rhs.x, this.y - rhs.y, this.z - rhs.z);
        },
        sub_inplace: function(rhs) {
            this.x -= rhs.x;
            this.y -= rhs.y;
            this.z -= rhs.z;
            return this;
        },
        mul: function(rhs) {
            return new Vec3(this.x * rhs, this.y * rhs, this.z * rhs);
        },
        mul_inplace: function(rhs) {
            this.x *= rhs;
            this.y *= rhs;
            this.z *= rhs;
            return this;
        },
        div: function(rhs) {
            return new Vec3(this.x / rhs, this.y / rhs, this.z / rhs);
        },
        div_inplace: function(rhs) {
            this.x /= rhs;
            this.y /= rhs;
            this.z /= rhs;
            return this;
        },
        dot: function(rhs) {
            return this.x * rhs.x + this.y * rhs.y + this.z * rhs.z;
        },
        len2: function() {
            return this.x * this.x + this.y * this.y + this.z * this.z;
        },
        len: function() {
            return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z);
        },
        normalize_inplace: function() {
            return...