首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

css3 transform及原生js实现鼠标拖动3D立方体旋转

Posted in HTML / CSS onJune 20, 2016

本文通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3D立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。
 
实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性。
 
从而通过改变transform：rotate属性值来达到3D立方体旋转的效果：
 
HTML代码块：

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.     <input type="button" class="open" value="点击散开"/>  
  3.     <input type="text" class="xNum" value="0"/>//X轴旋转角度   
  4.     <input type="text" class="yNum" value="0"/>//Y轴旋转角度   
  5.     <input type="text" class="zNum"/>  
  6.     <div class="big_box">  
  7.         <div class="box">  
  8.             <span>1</span>  
  9.             <span>2</span>  
  10.             <span>3</span>  
  11.             <span>4</span>  
  12.             <span>5</span>  
  13.             <span>6</span>  
  14.         </div>  
  15.     </div>  
  16. </body>   

CSS代码块：

CSS Code复制内容到剪贴板
  1. <style>   
  2.  body{cursor: url("img/openhand1.png"),auto;}   
  3.      .big_box{   
  4.             width: 500px;   
  5.             height: 500px;   
  6.             margin: 200px auto;   
  7.         }   
  8.   
  9.         .box{   
  10.             -webkit-transform-style: preserve-3d;   
  11.             -moz-transform-style: preserve-3d;   
  12.             -ms-transform-style: preserve-3d;   
  13.             transform-style: preserve-3d;   
  14.             transform-origin:100px 100px 00px;   
  15.             position: relative;   
  16.             transform: rotatex(0deg) rotatey(0deg) rotatez(0deg)scale3d(0.7,0.7,0.7);   
  17.         }   
  18.         .box span{   
  19.             transition: all 1s linear;   
  20.   
  21.         }   
  22.         span{   
  23.             display: block;   
  24.             position: absolute;   
  25.             width: 200px;   
  26.             height: 200px;   
  27.             box-sizing: border-box;   
  28.             border:1px solid #999;   
  29.             /*opacity: 0.7;*/  
  30.             text-align: center;   
  31.             line-height: 200px;   
  32.             font-size: 60px;   
  33.             font-weight: 700;   
  34.             border-radius: 12%;   
  35.   
  36.         }   
  37.         .box span:nth-child(1){   
  38.             background-color: deepskyblue;   
  39.             transform-origin: left;   
  40.             transform: rotatey(-90deg) translatex(-100px);//左   
  41.         }   
  42.         .box span:nth-child(2){   
  43.             background-color: red;   
  44.             transform-origin: rightright;   
  45.             transform: rotatey(90deg) translatex(100px) ;//右   
  46.   
  47.         }   
  48.   
  49.         .box span:nth-child(3){   
  50.             background-color: green;   
  51.             transform-origin: top;   
  52.             transform: rotatex(90deg) translatey(-100px) ;//上   
  53.   
  54.         }   
  55.         .box span:nth-child(4){   
  56.             background-color: #6633FF;   
  57.             transform-origin: bottombottom;   
  58.             transform: rotatex(-90deg) translatey(100px);//下   
  59.         }   
  60.         .box span:nth-child(5){   
  61.             background-color: gold;   
  62.             transform: translatez(-100px);//后   
  63.         }   
  64.         .box span:nth-child(6){   
  65.   
  66.             background-color: #122b40;   
  67.             transform: translatez(100px);//前   
  68.         }   
  69.         .box:hover span{   
  70.   
  71.             opacity: 0.3;   
  72.         }   
  73.         .box:hover{   
  74.             animation-play-state:paused;//设置动画暂停   
  75.         }   
  76. </style>    

JS代码块：

JavaScript Code复制内容到剪贴板
  1. <script>   
  2.     move();   
  3.   
  4.     clickBox();   
  5.   
  6.     //鼠标按下且移动时触发，   
  7.   
  8.     function move(){   
  9.         var body = document.querySelector("body");   
  10.         var box = document.querySelector(".box");   
  11.         var xNum =document.querySelector(".xNum");   
  12.         var yNum =document.querySelector(".yNum");   
  13.         var x = 0,y = 0,z = 0;   
  14.         var xx = 0,yy = 0;   
  15.         var xArr = [],yArr = [];   
  16.         window.onmousedown = function (e) {//鼠标按下事件   
  17.             body.style.cursor = 'url("img/closedhand1.png"),auto';   
  18.             xArr[0] = e.clientX/2;//获取鼠标点击屏幕时的坐标   
  19.             yArr[0] = e.clientY/2;   
  20.             window.onmousemove = function (e) {//鼠标移动事件————当鼠标按下且移动时触发   
  21.                 xArr[1] = e.clientX/2;//获取鼠标移动时第一个点的坐标   
  22.                 yArr[1] = e.clientY/2;   
  23.                 yy += xArr[1] - xArr[0];//获得鼠标移动的距离   
  24.                 xx += yArr[1] - yArr[0];   
  25.                 xNum.value = xx+"°";//将所获得距离数字赋值给input显示旋转角度   
  26.                 yNum.value = yy+"°";   
  27.                 //将旋转角度写入transform中   
  28.                 box.style.transform = "rotatex("+xx+"deg) rotatey("+yy+"deg) rotatez(0deg)scale3d(0.7,0.7,0.7)";   
  29.                 xArr[0] = e.clientX/2;   
  30.                 yArr[0] = e.clientY/2;   
  31.             }   
  32.   
  33.         };   
  34.         window.onmouseup = function () {//鼠标抬起事件————用于清除鼠标移动事件，   
  35.             body.style.cursor = 'url("img/openhand1.png"),auto';   
  36.             window.onmousemove = null;   
  37.         }   
  38.     }   
  39.     //点击事件、负责立方体盒子的六面伸展   
  40.     function clickBox(){   
  41.         var btn = document.querySelector(".open");   
  42.         var box = document.querySelector(".box");   
  43.         var son = box.children;   
  44.         var value = 0;   
  45.         //存储立方体散开时的transform参数   
  46.         var arr0 = ["rotatey(-90deg) translatex(-100px)","rotatey(90deg) translatex(100px)","rotatex(90deg) translatey(-100px)",<br>"rotatex(-90deg) translatey(100px)","translatez(-100px)","translatez(100px)"];   
  47.         //存储立方体合并时的transform参数   
  48.         var arr1 = ["rotatey(-90deg) translatex(-100px)translatez(100px)","rotatey(90deg) translatex(100px)translatez(100px)",<br>"rotatex(90deg) translatey(-100px)translatez(100px)","rotatex(-90deg) translatey(100px)translatez(100px)","translatez(-200px)","translatez(200px)"];   
  49.         btn.onclick = function(){   
  50.             if(value == 0){   
  51.                 value = 1;   
  52.                 btn.value = "点击合并";   
  53.                 for(var i=0;i<arr1.length;i++){   
  54.                     son[i].style.transform = arr1[i];   
  55.                     console.log(son[i])   
  56.                 }   
  57.             }else if(value == 1){   
  58.                 value = 0;   
  59.                 btn.value = "点击散开";   
  60.                 for(var j=0;j<arr0.length;j++){   
  61.                     son[j].style.transform = arr0[j];   
  62.                     console.log(j);   
  63.   
  64.                 }   
  65.             }   
  66.         };   
  67.     }   
  68. </script>    
  69.   

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

css3 transform及原生js实现鼠标拖动3D立方体旋转

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
css3 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 HTML / CSS
HTML5探秘：用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
HTML5 Canvas渐进填充与透明实现图像的Mask效果
Jul 11 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
CSS3实现3D翻书效果
Jun 20 #HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 #HTML / CSS
CSS3实现翘边的阴影效果的代码示例
Jun 13 #HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 #HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 #HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 #HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 #HTML / CSS
NASA(1) 火星(2) 美国航天局(1) 数据(1) 嘧啶碱基(2) 陨石(1) 大脑(1) 酶(1) 富碳陨石(1) 毅力号(1)
You might like
PHP采集利器 Snoopy 试用心得
2011/07/03 PHP
Zend Framework教程之Zend_Db_Table用法详解
2016/03/21 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
javascript包装对象实例分析
2015/03/27 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
Python引用（import）文件夹下的py文件的方法
2014/08/26 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
Django实现网页分页功能
2019/10/31 Python
美国领先的户外服装与装备用品店：Moosejaw
2016/08/25 全球购物
白俄罗斯大卖场：21vek.by
2019/07/25 全球购物
俄罗斯最大的在线珠宝大卖场：Nebo
2019/12/08 全球购物
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
晚归检讨书
2014/02/19 职场文书
委托协议书范本
2014/04/22 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
应收账款管理制度
2015/08/06 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
总结Python连接CS2000的详细步骤
2021/06/23 Python
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers