问用HTML、CSS和JS创建鼠标三维可旋转纸玩具

EN

好的，首先您需要学习如何使用html和css => Fiddle http://jsfiddle.net/sijav/4W5bX/10/制作一个简单的多维数据集。

这把小提琴有点旋转的标志立方体与5个徽标，你看有6里，即6平方的立方体，为了我们要使前下左上角，我们可以移动到他们的正确位置通过一个伟大的css规则.变换，在变换中，我们要在正确的位置变换正方形，所以我们必须使用两个属性，一个是旋转和旋转，第二个是转换，我们可以用旋转旋转一个正方形，使之像地板或屋顶(底部或顶部)，旋转使它们成为墙壁(左、右、后)。在前面，我们应该把它翻译出来，这样transform: translatez(5em);就足够了。回去我们需要把它旋转180度，然后把它转回去.为什么不把它翻译成负值呢？这将使李在正确的位置，但遗憾的是，它也将显示它像救护车标志在引擎盖，像ecnalubma .倒在镜子里！因此，我们必须旋转它180度transform: rotatey(180deg) translatez(5em);，我们应该做同样的左旋转(-90度)和右旋转(90度)。现在，对于顶部和底部，我们应该使用rotatex并旋转它们90度，并再次将其转换出来。在http://jsfiddle.net/sijav/4W5bX/12/上可以看到最高小提琴的简化。

既然你已经学会了如何制作一个简单的、简单的立方体，让我们用鼠标移动它，好吗？首先我们创建一个鼠标向下函数，这样在鼠标下移之前，多维数据集应该用鼠标移动，然后我们创建一个名为$('.container').on('mousedown',createMouseMoveFunction);的事件来设置多维数据集在移动前所需的属性，

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);

您可以看到，我们首先将鼠标状态保存在页面上的x或y上，然后将当前的旋转状态设置为多维数据集的当前旋转状态，以便它能够恢复旋转。

然后将多维数据集设置为移动，然后启动鼠标向下事件侦听器，并设置另一个侦听器用于鼠标在文档上移动，鼠标向上设置以阻止多维数据集与鼠标一起移动！现在，mousemove函数->

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/

​

​

玩得开心