专栏首页web秀CSS3之3D魔方鼠标控制酷炫效果

CSS3之3D魔方鼠标控制酷炫效果

前面文章有制作水晶魔方,这次我们升级一下它的功能,通过鼠标控制魔方旋转。

大家先看效果

这酷炫的效果,你怎么看?

鼠标事件

这次效果,咱们需要用JS实现。主要是监听鼠标事件,计算鼠标滑动距离,改变魔方的rotateX、rotateY

JS有哪些鼠标事件呢?

1、click:单击事件。

2、dblclick:双击事件。

3、onmousedown:鼠标按下时触发事件,不管按住左键/右键还是滑轮都可以

4、onmousemove:鼠标移动实时触发事件

5、onmouseup:鼠标松开时触发事件

6、mousemove:鼠标移动事件。

7、mouseover:移入事件。

8、mouseout:移出事件。

9、mouseenter:移入事件。

10、mouseleave:移出事件。

11、contextmenu:右键事件。

那需要监听哪些事件呢?了解了他们的作用,我们就知道如何处理了。

鼠标按下时,记录鼠标当前所处位置,移动时又可以获取实时位置,用移动时获取的实时位置减去鼠标按下时的位置,就可以得到鼠标移动的相对位置。鼠标松开,可以结束计算。

下面看看具体代码实现

示例代码

这里用到了Jquery,大家自行下载使用

// 角度初始化
var RotateY = 0;
var RotateX = 0;

// 用个变量来拦截onmousemove,
var flag = false;

// 起点位置
var old_x = 0;
var old_y = 0;
document.onmousedown = function (e) {
  flag = true;
  // 按下鼠标时,记录起点位置
  old_x = e.pageX;
  old_y = e.pageY;
}
document.onmousemove = function (e) {
  // 必须是按下后移动才有效果
  if (flag) {
    /**
      * 新位置减去老位置
      * 得到鼠标移动的X/Y距离
    */
    var _x = e.pageX - old_x;
    var _y = e.pageY - old_y;

    /**
     * 除以70得到需要旋转的角度
     * 除数越大,鼠标移动后旋转的角度越小,
     * 相反,除数是1,鼠标轻轻拖动,也会旋转的非常厉害
    */
    RotateY += _x / 70;
    RotateX += -(_y / 70);
    /**
      * 添加transform,盒子进行3D旋转
    */
    $('.box').css({
      transition: 'linear',
      transform: 'rotateX(' + RotateX + 'deg) rotateY(' + RotateY + 'deg)'
    });
  }
};
document.onmouseup = function () {
  flag = false;
  // 鼠标抬起时结束
};

这样就可以实现魔方跟随鼠标移动旋转了,但是大家可以看到上方的示例图,有一个展开和收起的效果,是如何实现的呢?

深入学习

之前咱们的魔方图是这样的

现在,画出2个魔方,一个小一点,使小的魔方刚好在大魔方中心位置

<div class="content">
  <div class="box">
    <!-- 外层魔方 -->
    <div class="out-front">前</div>
    <div class="out-back">后</div>
    <div class="out-left">左</div>
    <div class="out-right">右</div>
    <div class="out-top">上</div>
    <div class="out-bottom">下</div>
    <!-- 内层魔方 -->
    <span class="in-front"></span>
    <span class="in-back"></span>
    <span class="in-left"></span>
    <span class="in-right"></span>
    <span class="in-top"></span>
    <span class="in-bottom"></span>
  </div>
</div>

按照之前章节的样式,进行调节。使小的魔方刚好在大魔方中心位置。

样式如下:

.content {
  margin-top: 200px;
  perspective: 1000px;
  /* 视距 */
}
.box {
  width: 200px;
  height: 200px;
  position: relative;
  color: #fffdf5;
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
  transform-style: preserve-3d;
  /* 默认 2D */
  transition: transform 1s;
  /*transform动画效果*/
  /*不让鼠标选中文字*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.box>div {
  width: 200px;
  height: 200px;
  border: 1px solid #FF2869;
  position: absolute;
  background-color: #333;
  opacity: 0.5;
  transition: transform 0.4s;
  /*transform动画效果*/
}

.box .out-front {
  transform: translateZ(100px);
  background: url(./b1.jpg);
  background-size: cover;
}

.box .out-back {
  transform: translateZ(-100px) rotateY(180deg);
  background: url(./b2.jpg);
  background-size: cover;
}

.box .out-left {
  transform: translateX(-100px) rotateY(-90deg);
  background: url(./b3.jpg);
  background-size: cover;
}

.box .out-right {
  transform: translateX(100px) rotateY(90deg);
  background: url(./b4.jpg);
  background-size: cover;
}

.box .out-top {
  transform: translateY(-100px) rotateX(90deg);
  background: url(./b5.jpg);
  background-size: cover;
}

.box .out-bottom {
  transform: translateY(100px) rotateX(-90deg);
  background: url(./b6.jpg);
  background-size: cover;
}

.box>span {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid #FF2869;
  position: absolute;
  top: 50px;
  left: 50px;
}

.box .in-front {
  transform: translateZ(50px);
  background: url(./b1.jpg);
  background-size: cover;
}

.box .in-back {
  transform: translateZ(-50px) rotateY(180deg);
  background: url(./b2.jpg);
  background-size: cover;
}

.box .in-left {
  transform: translateX(-50px) rotateY(-90deg);
  background: url(./b3.jpg);
  background-size: cover;
}

.box .in-right {
  transform: translateX(50px) rotateY(90deg);
  background: url(./b4.jpg);
  background-size: cover;
}

.box .in-top {
  transform: translateY(-50px) rotateX(90deg);
  background: url(./b5.jpg);
  background-size: cover;
}

.box .in-bottom {
  transform: translateY(50px) rotateX(-90deg);
  background: url(./b6.jpg);
  background-size: cover;
}

然后我们通过JS控制展开和收起效果

var clickNum = 1;    //点击次数
$('.box').children().click(function () {
  // 如果点击次数是奇数就展开,偶数就收起
  if (clickNum % 2 == 0) {
    // 收起
    $('.out-front').css({ 
      transform: 'translateZ(100px)' 
    });
    $('.out-back').css({ 
      transform: 'translateZ(-100px) rotateY(180deg)'
    });
    $('.out-left').css({ 
      transform: 'translateX(-100px) rotateY(-90deg)'
    });
    $('.out-right').css({
      transform: 'translateX(100px) rotateY(90deg)'
    });
    $('.out-top').css({
      transform: 'translateY(-100px) rotateX(90deg)'
    });
    $('.out-bottom').css({
      transform: 'translateY(100px) rotateX(-90deg)'
    });
  } else {
    // 展开
    $('.out-front').css({ 
      transform: 'translateZ(200px)'
    });
    $('.out-back').css({ 
      transform: 'translateZ(-200px) rotateY(180deg)'
    });
    $('.out-left').css({ 
      transform: 'translateX(-200px) rotateY(-90deg)'
    });
    $('.out-right').css({ 
      transform: 'translateX(200px) rotateY(90deg)'
    });
    $('.out-top').css({ 
      transform: 'translateY(-200px) rotateX(90deg)'
    });
    $('.out-bottom').css({ 
      transform: 'translateY(200px) rotateX(-90deg)'
    });
  }
  clickNum++;
});

// box 的所有子元素添加鼠标手势样式
$('.box').children().mouseenter(function () {   
  $(this).css({ cursor: 'pointer' });
});

OK,这样我们的 CSS3 3D魔方鼠标控制酷炫效果就实现了。

结语

大家学到了什么?JS鼠标事件都了解了吧?CSS3 3D场景都学会了吗?

关注我,学习更多前端知识,但不止于前端哦!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用 CSS 背景混合模式制作高级效果

    如果「一图胜千言」,那多图混合创造的效果要超过千言万语。同理,CSS 的混合模式为设计带来的可能性远远超出了你的想象。

    Javanx
  • 如何快速上手基础的CSS3动画

    说起CSS3动画,就必须说说 transform,translate,transition,animation这4个属性,transform主要定义元素的动作,...

    Javanx
  • JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    你肯定知道,动画在创建引人注目的 Web 应用程序中扮演着重要的角色。随着用户越来越多地将注意力转移到用户体验上,商户开始意识到完美、愉快的用户体验的重要性,结...

    Javanx
  • java方法重载

    如下方代码块所示,代码块中的代码都是功能类似的方法,但是方法名却都不同这样子导致很难记忆,太过于麻烦

    一只胡说八道的猴子
  • 02-移动端开发教程-CSS3新特性(中)

    背景在CSS3中也得到很大程度的增强,比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

    老马
  • POJ 1321 棋盘问题(DFS板子题,简单搜索练习)

    棋盘问题 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 44012 ...

    Angel_Kitty
  • 几个不错的CSS按钮闪烁动画

    紫旭Blog - blog.zixutech.cn
  • 【面试题】2018年最全Java面试通关秘籍第二套!

    注:本文是从众多面试者的面试经验中整理而来,其中不少是本人出的一些题目,网络资源众多,如有雷同,纯属巧合!禁止一切形式的碰瓷行为!未经允许禁止一切形式的转载和复...

    Java后端技术
  • Metasploit漏洞扫描

    ​ 按照如上的使用教程,我们会得到一个扫描结果,然后导出为.nessus文件格式。

    Mirror王宇阳
  • 2018第一届全国代谢生物学大会第二轮通知【大师云集版】

    为展示我国代谢生物学研究的最新成果和进展,促进代谢生物学发展、助力动植物资源开发利用与人类健康,加强相关领域科研人员间交流合作,海南大学邀请代谢生物学相关领域...

    生信宝典

扫码关注云+社区

领取腾讯云代金券