html,坐标轴现实矩形旋转,HTML5 坐标系旋转演示动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var no_rot_txt = 'No rotation is applied on the element. The x axis points right, the y axis points down and the z axis points forward.',

data = {

'x': {

'-270': 'The element is rotated by -270° around its x axis. Its entire local system of coordinates is rotated around its x axis as well. The x axis is the only one that stays unchanged. The y axis now points towards the front and the z axis points up.',

'-180': 'The element is rotated by -180° around its x axis. Its entire local system of coordinates is rotated around its x axis as well. The x axis is the only one that stays unchanged. The y axis now points up and the z axis points towards the back.',

'-90': 'The element is rotated by -90° around its x axis. Its entire local system of coordinates is rotated around its x axis as well. The x axis is the only one that stays unchanged. The y axis now points towards the back and the z axis points down.',

'0': no_rot_txt,

'90': 'The element is rotated by 90° around its x axis. Its entire local system of coordinates is rotated around its x axis as well. The x axis is the only one that stays unchanged. The y axis now points towards the front and the z axis points up.',

'180': 'The element is rotated by 180° around its x axis. Its entire local system of coordinates is rotated around its x axis as well. The x axis is the only one that stays unchanged. The y axis now points up and the z axis points towards the back.',

'270': 'The element is rotated by 270° around its x axis. Its entire local system of coordinates is rotated around its x axis as well. The x axis is the only one that stays unchanged. The y axis now points towards the back and the z axis points down.'

},

'y': {

'-270': 'The element is rotated by -270° around its y axis. Its entire local system of coordinates is rotated around its y axis as well. The y axis is the only one that stays unchanged. The x axis now points towards the back and the z axis points to the right.',

'-180': 'The element is rotated by -180° around its y axis. Its entire local system of coordinates is rotated around its y axis as well. The y axis is the only one that stays unchanged. The x axis now points to the left and the z axis points towards the back.',

'-90': 'The element is rotated by -90° around its y axis. Its entire local system of coordinates is rotated around its y axis as well. The y axis is the only one that stays unchanged. The x axis now points towards the front and the z axis points to the left.',

'0': no_rot_txt,

'90': 'The element is rotated by 90° around its y axis. Its entire local system of coordinates is rotated around its y axis as well. The y axis is the only one that stays unchanged. The x axis now points towards the back and the z axis points to the right.',

'180': 'The element is rotated by 180° around its y axis. Its entire local system of coordinates is rotated around its y axis as well. The y axis is the only one that stays unchanged. The x axis now points to the left and the z axis points towards the back.',

'270': 'The element is rotated by 270° around its y axis. Its entire local system of coordinates is rotated around its y axis as well. The y axis is the only one that stays unchanged. The x axis now points towards the front and the z axis points to the left.'

},

'z': {

'-270': 'The element is rotated by -270° around its z axis. Its entire local system of coordinates is rotated around its z axis as well. The z axis is the only one that stays unchanged. The x axis now points down and the y axis points to the left.',

'-180': 'The element is rotated by -180° around its z axis. Its entire local system of coordinates is rotated around its y axis as well. The z axis is the only one that stays unchanged. The x axis now points to the left and the y axis points up.',

'-90': 'The element is rotated by -90° around its z axis. Its entire local system of coordinates is rotated around its z axis as well. The z axis is the only one that stays unchanged. The x axis now points up and the y axis points to the right.',

'0': no_rot_txt,

'90': 'The element is rotated by 90° around its z axis. Its entire local system of coordinates is rotated around its z axis as well. The z axis is the only one that stays unchanged. The x axis now points down and the y axis points to the left.',

'180': 'The element is rotated by 180° around its z axis. Its entire local system of coordinates is rotated around its z axis as well. The z axis is the only one that stays unchanged. The x axis now points to the left and the y axis points up.',

'270': 'The element is rotated by 270° around its z axis. Its entire local system of coordinates is rotated around its z axis as well. The z axis is the only one that stays unchanged. The x axis now points up and the y axis points to the right.'

}

};

Math.sign = Math.sign || function(x) { // because Safari

x = +x; // convert to a number

if (x === 0 || isNaN(x)) {

return x;

}

return x > 0 ? 1 : -1;

};

var axis = document.querySelector(':checked').id,

o = document.querySelector('.object'),

form = document.querySelector('form'),

a = document.getElementById('a'),

style = document.createElement('style'),

val = 0,

tg_val = 0,

dir = 1,

r_id = null,

step = a.step,

inf = document.querySelector('section');

var set = function(i) {

a.value = val;

style.textContent =

'.object{transform:rotate' + axis + '(' + val + 'deg);-webkit-transform:rotate' + axis + '(' + val + 'deg)}' +

'.object .axis-lbl:before{transform:rotate' + axis + '(' + -val + 'deg);-webkit-transform:rotate' + axis + '(' + -val + 'deg)}';

if (i && val % 90 === 0) {

inf.classList.remove('hidden');

inf.innerHTML = data[axis][val];

}

};

var update = function() {

if (Math.abs(tg_val - val) <= step) {

cancelAnimationFrame(r_id);

r_id = null;

val = tg_val;

set(1);

return;

}

set();

val += dir * step;

r_id = requestAnimationFrame(update);

};

var handleAngleChange = function() {

var m,

fa = form.querySelector('.active'),

na;

if (Math.abs(tg_val - ~~a.value) > step) {

inf.classList.add('hidden');

tg_val = ~~a.value;

m = tg_val % 90;

if (m === 0) {

if (tg_val !== val) {

if (fa) fa.classList.remove('active');

na = form.querySelector('[data-txt="' + tg_val + '°"]');

na.classList.add('active');

}

} else {

if (fa) fa.classList.remove('active');

}

if (r_id) {

cancelAnimationFrame(r_id);

r_id = null;

}

dir = Math.sign(tg_val - val);

update();

}

};

document.body.appendChild(style);

set(1);

form.addEventListener('click', function(e) {

var tg = e.target,

tag = tg.tagName.toLowerCase(),

fa = form.querySelector('.active');

if (tag === 'label' && axis != tg.textContent) {

axis = tg.textContent;

inf.innerHTML = data[axis][0];

o.className = 'object rot' + axis;

val = 0;

a.value = 0;

style.textContent = '';

if (fa) fa.classList.remove('active');

form.querySelector('[data-txt="0°"]').classList.add('active');

if (r_id) {

cancelAnimationFrame(r_id);

r_id = null;

}

}

if (tag === 'button') {

e.preventDefault();

inf.classList.add('hidden');

if (!tg.classList.contains('active')) {

tg_val = ~~tg.textContent.replace('°', '');

if (fa) fa.classList.remove('active');

tg.classList.add('active');

}

if (r_id) {

cancelAnimationFrame(r_id);

r_id = null;

}

dir = Math.sign(tg_val - val);

update();

}

}, false);

a.addEventListener('input', handleAngleChange, false);

a.addEventListener('change', handleAngleChange, false);

inf.addEventListener('click', function() {

if (!inf.classList.contains('hidden')) {

inf.classList.add('hidden');

}

}, false);