基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转


Posted in Javascript onJune 12, 2016

通过原生JS,点击事件,鼠标按下、鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示。

实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴、Y轴移动的距离,将距离实时赋值给transform属性

从而通过改变transform:rotate属性值来达到3d立方体旋转的效果

HTML代码块:

<body>
<input type="button" class="open" value="点击散开"/>
<input type="text" class="xNum" value=""/>//X轴旋转角度
<input type="text" class="yNum" value=""/>//Y轴旋转角度
<input type="text" class="zNum"/>
<div class="big_box">
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>

CSS代码块:

<style>
body{cursor: url("img/openhand1.png"),auto;}
.big_box{
width: 500px;
height: 500px;
margin: 200px auto;
}
.box{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
transform-origin:100px 100px 00px;
position: relative;
transform: rotatex(0deg) rotatey(0deg) rotatez(0deg)scale3d(0.7,0.7,0.7);
}
.box span{
transition: all 1s linear;
}
span{
display: block;
position: absolute;
width: 200px;
height: 200px;
box-sizing: border-box;
border:1px solid #999;
/*opacity: 0.7;*/
text-align: center;
line-height: 200px;
font-size: 60px;
font-weight: 700;
border-radius: 12%;
}
.box span:nth-child(1){
background-color: deepskyblue;
transform-origin: left;
transform: rotatey(-90deg) translatex(-100px);//左
}
.box span:nth-child(2){
background-color: red;
transform-origin: right;
transform: rotatey(90deg) translatex(100px) ;//右
}
.box span:nth-child(3){
background-color: green;
transform-origin: top;
transform: rotatex(90deg) translatey(-100px) ;//上
}
.box span:nth-child(4){
background-color: #6633FF;
transform-origin: bottom;
transform: rotatex(-90deg) translatey(100px);//下
}
.box span:nth-child(5){
background-color: gold;
transform: translatez(-100px);//后
}
.box span:nth-child(6){
background-color: #122b40;
transform: translatez(100px);//前
}
.box:hover span{
opacity: 0.3;
}
.box:hover{
animation-play-state:paused;//设置动画暂停
}
</style>

JS代码块:

<script>
move();
clickBox();
//鼠标按下且移动时触发,
function move(){
var body = document.querySelector("body");
var box = document.querySelector(".box");
var xNum =document.querySelector(".xNum");
var yNum =document.querySelector(".yNum");
var x = 0,y = 0,z = 0;
var xx = 0,yy = 0;
var xArr = [],yArr = [];
window.onmousedown = function (e) {//鼠标按下事件
body.style.cursor = 'url("img/closedhand1.png"),auto';
xArr[0] = e.clientX/2;//获取鼠标点击屏幕时的坐标
yArr[0] = e.clientY/2;
window.onmousemove = function (e) {//鼠标移动事件————当鼠标按下且移动时触发
xArr[1] = e.clientX/2;//获取鼠标移动时第一个点的坐标
yArr[1] = e.clientY/2;
yy += xArr[1] - xArr[0];//获得鼠标移动的距离
xx += yArr[1] - yArr[0];
xNum.value = xx+"°";//将所获得距离数字赋值给input显示旋转角度
yNum.value = yy+"°";
//将旋转角度写入transform中
box.style.transform = "rotatex("+xx+"deg) rotatey("+yy+"deg) rotatez(0deg)scale3d(0.7,0.7,0.7)";
xArr[0] = e.clientX/2;
yArr[0] = e.clientY/2;
}
};
window.onmouseup = function () {//鼠标抬起事件————用于清除鼠标移动事件,
body.style.cursor = 'url("img/openhand1.png"),auto';
window.onmousemove = null;
}
}
//点击事件、负责立方体盒子的六面伸展
function clickBox(){
var btn = document.querySelector(".open");
var box = document.querySelector(".box");
var son = box.children;
var value = 0;
//存储立方体散开时的transform参数
var arr0 = ["rotatey(-90deg) translatex(-100px)","rotatey(90deg) translatex(100px)","rotatex(90deg) translatey(-100px)",<br>"rotatex(-90deg) translatey(100px)","translatez(-100px)","translatez(100px)"];
//存储立方体合并时的transform参数
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)"];
btn.onclick = function(){
if(value == 0){
value = 1;
btn.value = "点击合并";
for(var i=0;i<arr1.length;i++){
son[i].style.transform = arr1[i];
console.log(son[i])
}
}else if(value == 1){
value = 0;
btn.value = "点击散开";
for(var j=0;j<arr0.length;j++){
son[j].style.transform = arr0[j];
console.log(j);
}
}
};
}
</script>

以上所述是小编给大家介绍的基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转 的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
很酷的javascript loading效果代码
Jun 18 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
jQuery UI 实现email输入提示实例
Aug 15 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
JS弹出窗口插件zDialog简单用法示例
Jun 12 #Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 #Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 #Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 #Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 #Javascript
JQuery的attr 与 val区别
Jun 12 #Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 #Javascript
You might like
在字符串中把网址改成超级链接
2006/10/09 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
php实现无限级分类
2014/12/24 PHP
php递归实现无限分类的方法
2015/07/28 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
php xhprof使用实例详解
2019/04/15 PHP
jquery随意添加移除html的实现代码
2011/06/21 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
js中Image对象以及对其预加载处理示例
2013/11/20 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
python将unicode和str互相转化的实现
2020/05/11 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
优秀团员个人的自我评价
2013/10/02 职场文书
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
2014年应届大学生自我评价
2014/01/09 职场文书
希特勒的演讲稿
2014/05/23 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
上课说话检讨书500字
2014/11/01 职场文书
升学宴家长致辞
2015/07/27 职场文书