lakenen/demo1.html

## demo1.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="CSSMatrix.js"></script>
<style>
body {
    background-color: #282828;
}
.page {
    margin: 200px auto;
    position: relative;
    width: 250px;
    height: 300px;
    /* note: vendor prefixes removed for the sake of this demo */
    perspective: 4000px;
    transform-style: preserve-3d;
}
.page-layer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 150px;
    line-height: 300px;
    text-align: center;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(180,180,180,0.2);
    color: rgba(255,255,255,0.25);
    text-shadow: 1px 1px 5px rgba(0,0,0,0.25);
}
.page-layer:first-child {
    background: rgba(60, 60, 60,0.9);
}
</style>
</head>
<body>
<div class="page"></div>
<script src="page.js"></script>
</body>

## page.js
var Matrix = window.WebKitCSSMatrix || window.MSCSSMatrix || window.CSSMatrix;
var NUM_LAYERS = 5, LAYER_SPACING = 75;

function Page($el) {
    var self = this,
        $layers,
        // current state of rotation, relative to original position (0,0,0)
        rotation = { x: 0, y: 0, z: 0 },
        // identity matrix, used to update rotationMatrix with a new rotation state
        identityMatrix = new Matrix(),
        // current rotation matrix to be applied to the layers
        rotationMatrix = new Matrix();

    var createLayers,
        updateLayers,
        applyTransform;

    self.rotate = function (dx, dy, dz) {
        rotation.x += dx || 0;
        rotation.y += dy || 0;
        rotation.z += dz || 0;
        rotation.x = rotation.x % 360;
        rotation.y = rotation.y % 360;
        rotation.z = rotation.z % 360;
        rotationMatrix = identityMatrix.rotate(rotation.x, rotation.y, rotation.z);
        updateLayers();
    };

    createLayers = function () {
        var i, layers = '';
        for (i = 0; i < NUM_LAYERS; ++i)
            layers += '<div class="page-layer">'+(i+1)+'</div>';
        $layers = $(layers);
        $el.html($layers);
    };

    updateLayers = function () {
        $.each($layers, function (i) {
            applyTransform($(this));
        });
    };

    // apply the matrix transform to a layer element
    applyTransform = function ($layer) {
        var matrix = rotationMatrix.translate(0, 0, $layer.index() * LAYER_SPACING);
        $layer.css('transform', matrix.toString());
    };

    createLayers();
    updateLayers();
};

// instantiate a page
var page = new Page($('.page'));

// let's rotate it!
page.rotate(10, 25);

// let's also add pointer events so we can drag it around
$(document).on('mousedown', function (ev) {
    var last = getCoord(ev);
    $(document).on('mousemove', function (ev) {
        var mouse = getCoord(ev);
            dx = mouse.x - last.x,
            dy = mouse.y - last.y;
        last = mouse;
        // note: x and y mean different things in mouse coords, vs rotation axis
        page.rotate(-dy / 2, dx / 2);
        ev.preventDefault();
        return false;
    });

    $(document).on('mouseup', function (ev) {
        $(document).off('mousemove mouseup');
        ev.preventDefault();
        return false;
    });

    ev.preventDefault();
    return false;
});

function getCoord(ev) {
    return {
        x: ev.pageX,
        y: ev.pageY
    };
}
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Demo</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="CSSMatrix.js"></script>
	<style>
	body {
	background-color: #282828;
	}
	.page {
	margin: 200px auto;
	position: relative;
	width: 250px;
	height: 300px;
	/* note: vendor prefixes removed for the sake of this demo */
	perspective: 4000px;
	transform-style: preserve-3d;
	}
	.page-layer {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 150px;
	line-height: 300px;
	text-align: center;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(180,180,180,0.2);
	color: rgba(255,255,255,0.25);
	text-shadow: 1px 1px 5px rgba(0,0,0,0.25);
	}
	.page-layer:first-child {
	background: rgba(60, 60, 60,0.9);
	}
	</style>
	</head>
	<body>
	<div class="page"></div>
	<script src="page.js"></script>
	</body>
	var Matrix = window.WebKitCSSMatrix \|\| window.MSCSSMatrix \|\| window.CSSMatrix;
	var NUM_LAYERS = 5, LAYER_SPACING = 75;

	function Page($el) {
	var self = this,
	$layers,
	// current state of rotation, relative to original position (0,0,0)
	rotation = { x: 0, y: 0, z: 0 },
	// identity matrix, used to update rotationMatrix with a new rotation state
	identityMatrix = new Matrix(),
	// current rotation matrix to be applied to the layers
	rotationMatrix = new Matrix();

	var createLayers,
	updateLayers,
	applyTransform;

	self.rotate = function (dx, dy, dz) {
	rotation.x += dx \|\| 0;
	rotation.y += dy \|\| 0;
	rotation.z += dz \|\| 0;
	rotation.x = rotation.x % 360;
	rotation.y = rotation.y % 360;
	rotation.z = rotation.z % 360;
	rotationMatrix = identityMatrix.rotate(rotation.x, rotation.y, rotation.z);
	updateLayers();
	};

	createLayers = function () {
	var i, layers = '';
	for (i = 0; i < NUM_LAYERS; ++i)
	layers += '<div class="page-layer">'+(i+1)+'</div>';
	$layers = $(layers);
	$el.html($layers);
	};

	updateLayers = function () {
	$.each($layers, function (i) {
	applyTransform($(this));
	});
	};

	// apply the matrix transform to a layer element
	applyTransform = function ($layer) {
	var matrix = rotationMatrix.translate(0, 0, $layer.index() * LAYER_SPACING);
	$layer.css('transform', matrix.toString());
	};

	createLayers();
	updateLayers();
	};

	// instantiate a page
	var page = new Page($('.page'));

	// let's rotate it!
	page.rotate(10, 25);

	// let's also add pointer events so we can drag it around
	$(document).on('mousedown', function (ev) {
	var last = getCoord(ev);
	$(document).on('mousemove', function (ev) {
	var mouse = getCoord(ev);
	dx = mouse.x - last.x,
	dy = mouse.y - last.y;
	last = mouse;
	// note: x and y mean different things in mouse coords, vs rotation axis
	page.rotate(-dy / 2, dx / 2);
	ev.preventDefault();
	return false;
	});

	$(document).on('mouseup', function (ev) {
	$(document).off('mousemove mouseup');
	ev.preventDefault();
	return false;
	});

	ev.preventDefault();
	return false;
	});

	function getCoord(ev) {
	return {
	x: ev.pageX,
	y: ev.pageY
	};
	}