首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >用HTML、CSS和JS创建鼠标三维可旋转纸玩具

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

Stack Overflow用户
提问于 2014-11-15 11:33:58
回答 1查看 1.4K关注 0票数 1

我想用HTML元素和CSS创建一个纸玩具。我要它可以通过鼠标拖动来旋转它。

我的纸玩具是

我怎样才能做到这一点?(头部左右为梯形,前后为三角形切割)

如何创建这个三维立方体(我想要类似于"https://www.foldable.me/foldables/new")?的东西)它可以用鼠标拖动旋转。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 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);的事件来设置多维数据集在移动前所需的属性,

代码语言:javascript
运行
复制
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函数->

代码语言:javascript
运行
复制
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从文档中删除鼠标移动句柄。

代码语言:javascript
运行
复制
CubeMove = false;
$(document).off('mousemove',MouseMove);
$(document).off('mouseup',removeMouseMoveFunction);
$('.container').on('mousedown',createMouseMoveFunction);

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

玩得开心

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/26945356

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档