cssrotate

by Laurens Maneschijn

HTML

<div id="div1">
  <div id="div2">Hello</div>
</div>
<br>

<input type="button" onclick="toggleRotationLoop();" value="toggle Rotation Loop"/>
<label><input type="checkbox" id="looprot" > rotate()</label>
<label><input type="checkbox" id="looprotx"> rotateX()</label>
<label><input type="checkbox" id="looproty"> rotateY()</label>
<label><input type="checkbox" id="looprotz"> rotateZ()</label>
<input type="range" min="0" max="1000" step="1" value="15" id="rotdelay" /> loop delay ms
    <br>loop type:
	<label><input type="radio" name="looptype" value="aniframe" class="inputlooptype" checked > requestAnimationFrame()</label>
	<label><input type="radio" name="looptype" value="interval" class="inputlooptype"         > setInterval()</label>
<br>

<input type="range" min="-360" max="360" step="10" value="0" id="rot"  class="inputrotate" /> : rotate() : same effect as rotateZ(), effect stacks<br>
<input type="range" min="-360" max="360" step="10" value="0" id="rotx" class="inputrotate" /> : rotateX()<br>
<input type="range" min="-360" max="360" step="10" value="0" id="roty" class="inputrotate" /> : rotateY()<br>
<input type="range" min="-360" max="360" step="10" value="0" id="rotz" class="inputrotate" /> : rotateZ()<br>
<code>transform : <span id="transformvalue"></span></code>
	
<br>
<input type="range" min="-100" max="100" value="50" step="10" id="ox" class="inputorigin" /> : transform-origin X
	<label><input type="radio" name="oxrel" value="%"  class="inputorigin" checked > %  relative</label>
	<label><input type="radio" name="oxrel" value="px" class="inputorigin"         > px absolute</label>
	<br>
<input type="range" min="-100" max="100" value="50" step="10" id="oy" class="inputorigin" /> : transform-origin Y
	<label><input type="radio" name="oyrel" value="%"  class="inputorigin" checked > %  relative</label>
	<label><input type="radio" name="oyrel" value="px" class="inputorigin"         > px absolute</label>
	<br>
<input type="range" min="-100" max="100" value="0" ...

CSS

body{
	background:#222;
    color:#888;
}
#div1
{
	position: relative;
	display:inline-block;
	height: 100px;
	width: 100px;
	margin: 10px;
	padding:100px;
	border: 1px solid black;
	overflow:hidden;
	perspective: 600px;
}

#div2
{
	position: absolute;
	display:inline-block;
	padding:30px;
	border: 1px solid black;
	color: #f8f;
	background-color: #aaf;
	background: #aaf url('catinbag.jpg') no-repeat center center / 100px 100px;
	background: #aaf url('catinbag.jpg') no-repeat center center / 100% 100%;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
/*
	-webkit-transform        : rotateY(70deg);
	        transform        : rotateY(70deg);
	-webkit-transform-origin : 50% 50% 100px;
	        transform-origin : 50% 50% 100px;
*/
}
.origin
{
	position: absolute;
	display:inline-block;
	width:10px;
	height:10px;
	padding:0;
	border-top:1px solid #0f0;
	border-left:1px solid #0f0;
}

JavaScript

if(jQuery){
		var $ = jQuery,d = 0,n = 0,min,max,step=1;
		$(document)
			.off('mousewheel.number_mousewheel')
			.on('mousewheel.number_mousewheel','input[type="number"],input[type="range"]',function(e){
				$target = $(this).filter('input[type="number"],input[type="range"]');
				if($target.length){
					e.preventDefault();
					e.stopImmediatePropagation();
					n    = Number.parseInt($target.val(), 10);
					min  = Number.parseInt($target.prop('min'), 10);
					max  = Number.parseInt($target.prop('max'), 10);
					step = Number.parseInt($target.prop('step'), 10);
					if(!Number.isNaN(n)){
						if(e.originalEvent.wheelDelta){
							if(e.originalEvent.wheelDelta != 0 && e.originalEvent.wheelDelta % 120 == 0){
								d = e.originalEvent.wheelDelta / 120;
							}else{
								d = e.originalEvent.wheelDelta > 0 ? 1 : -1;
							}
						}
						if(!Number.isNaN(step) && step != 0){
							d *= step; 
						}
						n += d;
						if(!Number.isNaN(min) && n < min){
							n = min;
						}
						if(!Number.isNaN(max) && n > max){
							n = max;
						}
						$target.val(n).change(); 
					}
				} 
			}); 
		$(document)
			.off('.rangemousemovechange')
			.on('input.rangemousemovechange','input[type=range]',function(e){
				$(e.target).trigger('change');
			});
		$(document)
			.off('.rangetitlevalue')
			.on('change.rangetitlevalue','input[type=range]',function(e){
				$(e.target).attr('title',e.target.value);
			});
	}



//////////


function getId(id){
	return document.getElementById(id);
}
function setTransform(target, func, value){
	var i,v,key,keys = ['OTransform','MozTransform','webkitTransform','transform'];
	if(!target || !target.style){
		return;
	}
	v = func + '(' + value + ')';
	for(i=0;i<keys.length;i++){
		key = keys[i];
		target.style[key] = v;
	}
}
function setTransformMulti(target, functionvalues){
	// set multiple functions at once on the same transform style key.
	// e.g. obj.style.transform = 'rotate(70deg) rotateX(100deg) rotateY(130deg)...