基于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 相关文章推荐
js压缩利器
Feb 20 Javascript
判断用户的在线状态 onbeforeunload事件
Mar 05 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
Mar 19 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
koa源码中promise的解读
Nov 13 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
动态表格Table类的实现
2009/08/26 Javascript
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
Vue底层实现原理总结
2018/02/17 Javascript
基于Node.js的大文件分片上传示例
2019/06/19 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
如何将python中的List转化成dictionary
2016/08/15 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
python开启debug模式的方法
2019/06/27 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
python实现电子词典
2020/03/03 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
5款实用的python 工具推荐
2020/10/13 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
敬老院标语
2014/06/27 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
redis连接被拒绝的解决方案
2021/04/12 Redis
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
vue实现登陆页面开发实践
2022/05/30 Vue.js