使用HTML，CSS和JS创建鼠标3D可旋转papertoy

alright first of all you need to learn how to make a simple cube with html and css => Fiddle http://jsfiddle.net/sijav/4W5bX/10/
this fiddle was somewhat rotational logo cube with 5 logos, you see there are 6 li that is 6 square of a cube, in order we want to make front bottom top left right back, we can move them to their rightful position by a great css rules ... transform, in transform we want to transform the squares at the correct location so we must use two property first one is rotatex and rotatey and second is translatez, we can use rotatex to rotate a square to be like floor or roof (bottom or top) and rotatey to make them be the walls (left, right and back). for front we should just translate it to come forth so transform: translatez(5em); would be enough. for back we need to rotatey it 180 degree and translate it to go back ... why not just translate it with negative value? that would make the li on right position but sadly it will also show it like ambulance logo on the hood like ecnalubma ... inverted like in mirror! so we must rotate it 180 degree transform: rotatey(180deg) translatez(5em); we should do the same for left rotatey(-90deg) and right rotatey(90deg). now for top and bottom we should use rotatex and rotate them 90deg and translate it forth again. a simplify of top fiddle can be seen at http://jsfiddle.net/sijav/4W5bX/12/.
now that you have learnt how to make a simple easy cube lets move it with mouse shall we? first we create a mousedown function so that until mouse is down the cube should move with mouse, $('.container').on('mousedown',createMouseMoveFunction); then we create an event called createMouseMoveFunction to set properties that our cube needs before move,

firstX = e.pageX;
firstY = e.pageY;
firstRY = parseInt($('.cube').css('rotateY'));
firstRX = parseInt($('.cube').css('rotateX'));
CubeMove = true;
$('.container').off('mousedown',createMouseMoveFunction);
$(document).on('mousemove',MouseMove);
$(document).on('mouseup',removeMouseMoveFunction);

you see we first save the mouse states on x or y on the page, then we set the current rotate state o the cube so that it can resume rotate.
and then a set the cube to move, then set off the mouse down event listener and set another listener for mouse move on the document and mouse up for stop the cube from moving with mouse! now the mousemove function ->

if(CubeMove){
    $('.cube').css({
        rotateY: firstRY + (el.pageX - firstX),
        rotateX: firstRX + (firstY - el.pageY)
    });

您会看到cubemove属性为true时，它将基于鼠标位置（el.pageXY）旋转x和y。firstXY是第一个鼠标指针，因为我们希望基于第一个鼠标位置创建立方体，而firstRXY是第一个立方体位置，因此我们进行了更改多维数据集也基于它的第一个位置。
现在是mousedown函数，我们使用.off jquery从文档中删除任何鼠标移动句柄

CubeMove = false;
$(document).off('mousemove',MouseMove);
$(document).off('mouseup',removeMouseMoveFunction);
$('.container').on('mousedown',createMouseMoveFunction);

小提琴 http://fiddle.jshell.net/4W5bX/45/

玩得开心