$ mouse-controlled rotating 3D cube

/* mouse-controlled rotating 3D cube */
var cube = document.createElement('div');
cube.style.width = '100px';
cube.style.height = '100px';
cube.style.backgroundColor = 'red';
cube.style.position = 'absolute';
cube.style.top = '50%';
cube.style.left = '50%';
cube.style.marginTop = '-50px';
cube.style.marginLeft = '-50px';
cube.style.transformStyle = 'preserve-3d';
cube.style.transition = 'transform 1s';
document.body.appendChild(cube);
var cubeFace = document.createElement('div');
cubeFace.style.width = '100px';
cubeFace.style.height = '100px';
cubeFace.style.backgroundColor = 'blue';
cubeFace.style.position = 'absolute';
cubeFace.style.top = '0';
cubeFace.style.left = '0';
cubeFace.style.transform = 'translateZ(50px)';
cube.appendChild(cubeFace);
var cubeFace = document.createElement('div');
cubeFace.style.width = '100px';
cubeFace.style.height = '100px';
cubeFace.style.backgroundColor = 'green';
cubeFace.style.position = 'absolute';
cubeFace.style.top = '0';
cubeFace.style.left = '0';
cubeFace.style.transform = 'rotateY(90deg) translateZ(50px)';
cube.appendChild(cubeFace);
var cubeFace = document.createElement('div');
cubeFace.style.width = '100px';
cubeFace.style.height = '100px';
cubeFace.style.backgroundColor = 'yellow';
cubeFace.style.position = 'absolute';
cubeFace.style.top = '0';
cubeFace.style.left = '0';
cubeFace.style.transform = 'rotateY(180deg) translateZ(50px)';
cube.appendChild(cubeFace);
var cubeFace = document.createElement('div');
cubeFace.style.width = '100px';
cubeFace.style.height = '100px';
cubeFace.style.backgroundColor = 'orange';
cubeFace.style.position = 'absolute';
cubeFace.style.top = '0';
cubeFace.style.left = '0';
cubeFace.style.transform = 'rotateY(-90deg) translateZ(50px)';
cube.appendChild(cubeFace);
var cubeFace = document.createElement('div');
cubeFace.style.width = '100px';
cubeFace.style.height = '100px';
cubeFace.style.backgroundColor = 'purple';
cubeFace.style.position = 'absolute';
cubeFace.style.top = '0';
cubeFace.style.left = '0';
cubeFace.style.transform = 'rotateX(90deg) translateZ(50px)';
cube.appendChild(cubeFace);
var cubeFace = document.createElement('div');
cubeFace.style.width = '100px';
cubeFace.style.height = '100px';
cubeFace.style.backgroundColor = 'pink';
cubeFace.style.position = 'absolute';
cubeFace.style.top = '0';
cubeFace.style.left = '0';
cubeFace.style.transform = 'rotateX(-90deg) translateZ(50px)';
cube.appendChild(cubeFace);
document.body.onmousemove = function(e) {
  cube.style.transform = 'rotateX(' + (e.clientY - window.innerHeight / 2) / window.innerHeight * 180 + 'deg) rotateY(' + (e.clientX - window.innerWidth / 2) / window.innerWidth * 180 + 'deg)';
};