Interactive Perspective

by cchana

HTML

<div id="boxes">
	<div id="box"></div>
</div>

<form>
  Perspective:<br />
  <input type="range" min="-1000" max="1000" value="0" class="slider" data-index="0" /><span id="val-0"></span><br />
  Perspective Origin (X):<br />
  <input type="range" min="-100" max="100" value="0" class="slider" data-index="1" /><span id="val-1"></span><br />
  Perspective Origin (Y):<br />
  <input type="range" min="-100" max="100" value="0" class="slider" data-index="2" /><span id="val-2"></span><br />
  Rotate (X):<br />
  <input type="range" min="-180" max="180" value="0" class="slider" data-index="3" /><span id="val-3"></span><br />
  Rotate (Y):<br />
  <input type="range" min="-180" max="180" value="0" class="slider" data-index="4" /><span id="val-4"></span>
</form>

CSS

#boxes {
	padding: 50px;
	perspective: 0;
	perspective-origin: 0;
}
#box {
	background-color: #888;
	border: 1px solid red;
	height: 100px;
	transform: rotateX(0);
	width: 100px;
}

JavaScript

var sliders = document.getElementsByClassName('slider'),
	len = sliders.length;
for(var i = 0; i < len; i++) {
	var span = document.getElementById('val-' + i);
	sliders[i].oninput = function(el) {;
		var span = document.getElementById('val-' + el.target.dataset.index),
			val = el.target.value;
		span.innerHTML = val;
		redraw();
	}
}

function redraw() {
	var sliders = document.getElementsByClassName('slider'),
		boxes = document.getElementById('boxes'),
		box = document.getElementById('box');
	boxes.style.perspective = sliders[0].value + 'px';
	boxes.style.perspectiveOrigin = sliders[1].value + '% ' + sliders[2].value + '%';
	box.style.transform = 'rotateX(' + sliders[3].value + 'deg) rotateY(' + sliders[4].value + 'deg)';
}