html5实现3d正方形表情旋转,HTML5 带面部表情的拟人化立方体

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var c = document.querySelector('.container');

var cubs = [];

for (var i = 0; i < c.children.length; i++) {

if (c.children[i].className == 'cube') {

var cube = c.children[i];

var l = document.createElement('div');

var r = document.createElement('div');

var t = document.createElement('div');

var b = document.createElement('div');

var f = document.createElement('div');

var bk = document.createElement('div');

var le = document.createElement('span');

var re = document.createElement('span');

var mouth = document.createElement('span');

l.className = 'left';

r.className = 'right';

t.className = 'top';

b.className = 'bottom';

f.className = 'front';

bk.className = 'back';

le.className = 'leftEye';

re.className = 'rightEye';

mouth.className = 'mouth';

f.appendChild(le);

f.appendChild(re);

f.appendChild(mouth);

cube.appendChild(l);

cube.appendChild(r);

cube.appendChild(t);

cube.appendChild(b);

cube.appendChild(f);

cube.appendChild(bk);

for (n = 0; n < cube.children.length; n++) {

cube.children[n].style.position = 'absolute';

cube.children[n].style.height = '50px';

cube.children[n].style.width = '50px';

cube.children[n].style.backgroundColor = 'hsl(' + ((360 / c.children.length) * i) + ', 40%, ' + (30 + (n * 10)) + '%)';

}

f.style.webkitTransform = 'translateZ(25px)';

bk.style.webkitTransform = 'translateZ(-25px)';

l.style.webkitTransform = 'rotateY(90deg) translateZ(-25px)';

r.style.webkitTransform = 'rotateY(90deg) translateZ(25px)';

t.style.webkitTransform = 'rotateX(90deg) translateZ(25px)';

b.style.webkitTransform = 'rotateX(90deg) translateZ(-25px)';

cubs.push(new cub(i));

}

}

function cub(index) {

this.index = index;

this.x = c.offsetLeft - (c.offsetWidth / 2) + cube.offsetLeft + (cube.offsetWidth / 2);

this.y = c.offsetTop - (c.offsetHeight / 2) + cube.offsetTop + (cube.offsetHeight / 2);

}

for (var i = 0; i < c.children.length; i++) {

var ch = c.children[i];

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

if (this.id !== 'killed') {

this.setAttribute('id', 'killed');

} else {

this.setAttribute('id', '');

}

});

}

document.addEventListener('mousemove', function(e) {

for (var i = 0; i < c.children.length; i++) {

var elem = c.children[i];

var posX = ((e.clientX - cubs[i].x) / window.innerWidth) * 110;

var posY = (-1 * (e.clientY - cubs[i].y) / window.innerHeight) * 110;

elem.style.webkitTransform = 'rotateY(' + posX + 'deg) rotateX(' + posY + 'deg)';

}

});