<div class="container">
	<div>
		<h2>Transform</h2>
		<div>
		<div class="btn-group" role="group" style="margin-bottom:10px">
			<button type="button" class="btn btn-info transform-type active">translate</button>
			<button type="button" class="btn btn-info transform-type">rotate</button>
			<button type="button" class="btn btn-info transform-type">skew</button>
			<button type="button" class="btn btn-info transform-type">scale</button>
		</div>
	
		<div class="box-wrap flex-center">
			<div class="box box1" id="box1"></div>
		</div>
		
			
			<div class="range-box">
				<label for="">X</label>
				<input class="range" data-type="x" type="range" />
			</div>
			
			<div class="range-box">
				<label for="">Y</label>
				<input class="range" data-type="y" type="range" />
			</div>
		</div>
	</div>
	<br/><br/><br/>
	<div>
		<h2>Transform + Transition</h2>
		
		<div class="btn-group" role="group" style="margin-bottom:10px">
			<button type="button" class="btn btn-info transition-type">ease</button>
			<button type="button" class="btn btn-info transition-type">ease-in</button>
			<button type="button" class="btn btn-info transition-type">ease-in-out</button>
			<button type="button" class="btn btn-info transition-type">linear</button>
		</div>
		
		<div class="box-wrap flex-left box-wrap2">
			<div class="box box2" id="box2"></div>
		</div>
	</div>
	<br/><br/><br/>
	<div>
		<h2>Transform3D</h2>
		<p>perspective: 300; transform-style: preserve-3d; rotateY animation: rotate-frame 30s linear infinite;</p>
		<div class="box3d-wrap flex-center" id="box3dWrap">
			<div class="box3d-inner">
				<div class="box3d box-front">front</div>
				<div class="box3d box-back">back</div>
				<div class="box3d box-left">left</div>
				<div class="box3d box-top">top</div>
				<div class="box3d box-right">right</div>
				<div class="box3d box-bottom">bottom</div>
			</div>
		</div>
	</div>
	
	
</div>
input[type="range"] { width: 300px; }
.range-box { display: none; }
.flex-center,.flex-left{ display:flex; align-items:center; justify-content: center; }
.flex-left{ justify-content: flex-start; }
.box { width: 50px; height: 50px; background: #000;}
.box-wrap{  width: 400px; height: 200px; border: 1px solid; }
.box-wrap2{ height: 60px }
.box2{ border-radius: 50%; width: 30px; height: 30px; transition-property: all; transition-duration: 1000ms;}

.box2.active{ transform: translateX(360px);}
.box2.ease{ transition-timing-function: ease;}
.box2.ease-in { transition-timing-function: ease-in;}
.box2.ease-in-out { transition-timing-function: ease-in-out;}
.box2.ease-out { transition-timing-function: ease-out;}
.box2.linear { transition-timing-function: linear;}


.box3d-wrap { border:1px solid #eee; width: 400px; height: 300px; box-sizing:border-box;  cursor: move;  perspective: 300;}
.box3d-inner{ position: relative; width: 100px; height: 100px;
	transform-style: preserve-3d;
	animation: rotate-frame 30s linear infinite;
}
.box3d { width: 100px;height: 100px; position: absolute; box-sizing:border-box; color:#fff; line-height: 100px; text-align: center;}

.box-front { transform:translateZ(100px); background: RGBA(213, 98, 163, .6);}
.box-left { transform: rotateY(-90deg); transform-origin: left; background:RGBA(213, 98, 117, .6);}
.box-right { transform: rotateY(90deg); transform-origin: right; background: RGBA(213, 98, 192, .6);}
.box-top {transform: rotateX(90deg); transform-origin:top; background:RGBA(213, 207, 98, .6);}
.box-bottom {transform: rotateX(-90deg); transform-origin: bottom; background:RGBA(98, 213, 138, .6);}

@keyframes rotate-frame {
	0% {
			transform: rotateX(0deg) rotateY(0deg);
	}
	10% {
			transform: rotateX(0deg) rotateY(180deg);
	}
	20% {
			transform: rotateX(-180deg) rotateY(180deg);
	}
	30% {
			transform: rotateX(-360deg) rotateY(180deg);
	}
	40% {
			transform: rotateX(-360deg) rotateY(360deg);
	}
	50% {
			transform: rotateX(-180deg) rotateY(360deg);
	}
	60% {
			transform: rotateX(90deg) rotateY(180deg);
	}
	70% {
			transform: rotateX(0) rotateY(180deg);
	}
	80% {
			transform: rotateX(90deg) rotateY(90deg);
	}
	90% {
			transform: rotateX(90deg) rotateY(0);
	}
	100% {
			transform: rotateX(0) rotateY(0);
	}
}
// ======================================= Transform
var currAttr = 'translate';// translate rotate scale skew

var RANGE_CONFIG = {
	'translate':{x: [-200, 200, 0], y:[-100, 100, 0], step: 1, bg: '#3C763D'},
	'scale': { x: [0, 10, 1], y:[0, 10, 1], step:0.1, bg: '#31b0d5'},
	'rotate': {x:[0, 360, 0], step:1, bg:'#ec971f'},
	'skew':{ x: [0, 100, 0], y:[0, 100, 0], step:1, bg:'#d9534f'},
}
var $ranges = $('.range');
var $rangeBoxs = $('.range-box');
var $box = $('#box1');

function initRange(attr){
	var opt = RANGE_CONFIG[attr];
	$ranges.eq(0).attr({min:opt.x[0], max: opt.x[1], step: opt.step}).val(opt.x[2]).parent().show();
	if(opt.y){
		$ranges.eq(1).attr({min:opt.y[0], max: opt.y[1], step: opt.step}).val(opt.y[2]).parent().show();
	}else{
		$ranges.eq(1).parent().hide();
	}
	$box.css({'background': opt.bg, 'transform':'matrix(1,0,0,1,0,0)'})
}

initRange(currAttr);

$('.transform-type').on('click', function(){
	currAttr = $(this).text();
	$('.transform-type').removeClass('active');
	$(this).addClass('active');
	initRange(currAttr);
})

$('.range').on('input',function(){
	var $this = $(this), type= $this.data('type'), val = $this.val();
	
	var idx = 0, regArr, currStyle = $box.css('transform');
	
	if(currStyle !== 'none'){
		regArr = currStyle.split('(')[1].replace(')','').split(',');
	}else{
		regArr = [1, 0, 0, 1, 0, 0];
	}
	
	if(currAttr == 'translate'){
		idx = type === 'x' ? 4 : 5;
		regArr[idx] = val;
	}
	
	if(currAttr == 'scale'){
		idx = type === 'x' ? 0 : 3;
		regArr[idx] = val;
	}
	
	if(currAttr == 'rotate'){
		var cos = Math.cos(val * Math.PI / 180).toFixed(6);
		var sin = Math.sin(val * Math.PI / 180).toFixed(6);
		
		regArr[0] = cos;
		regArr[1] = sin;
		regArr[2] = -sin;
		regArr[3] = cos;
	}
	
	if(currAttr == 'skew'){
		var tan = Math.tan(val * Math.PI / 180).toFixed(6);
		idx = type === 'x' ? 2 : 1;
		regArr[idx] = tan;
	}
	var transformVal = 'matrix('+regArr.join(', ')+')';
	console.log(val + ' - ' +transformVal);
	$box.css({transform: transformVal});
})

// ================================== Transition
var $box2 = $('#box2'), timmer = null;

$('.transition-type').on('click', function(){
	var $this = $(this);
	var timingType = $this.text();
	$('.transition-type').removeClass('active');
	
	$box2.attr('class','box box2 active '+ timingType);
	clearTimeout(timmer);
	timmer = setTimeout(function(){
		$box2.attr('class','box box2');
	}, 1500);
})

//==============================


Rerun