我想用HTML元素和CSS创建一个纸玩具。我要它可以通过鼠标拖动来旋转它。
我的纸玩具是
我怎样才能做到这一点?(头部左右为梯形,前后为三角形切割)
如何创建这个三维立方体(我想要类似于"https://www.foldable.me/foldables/new")?的东西)它可以用鼠标拖动旋转。
发布于 2014-11-23 23:00:59
好的,首先您需要学习如何使用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/
玩得开心
https://stackoverflow.com/questions/26945356
复制相似问题