基于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 作用域使用说明
Aug 13 Javascript
基于jQuery的日期选择控件
Oct 27 Javascript
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
javascript 获取图片尺寸及放大图片
Sep 04 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
iSlider手机端图片滑动切换插件使用详解
Dec 24 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 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
如何开始收听短波广播
2021/03/01 无线电
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
php生成短网址示例
2014/05/05 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
JS获取后台Cookies值的小例子
2013/03/04 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
Python 70行代码实现简单算式计算器解析
2019/08/30 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
空指针到底是什么
2012/08/07 面试题
如何获得EntityManager
2014/02/09 面试题
初一体育教学反思
2014/01/29 职场文书
校企合作协议书
2014/04/16 职场文书
征兵宣传标语
2014/06/20 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
工作时间调整通知
2015/04/24 职场文书
交通事故责任认定书
2015/08/06 职场文书
浅谈Python中的正则表达式
2021/06/28 Python
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL