基于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 相关文章推荐
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
JS常用函数使用指南
Nov 23 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
jQuery事件对象总结
Oct 17 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
JS实现页面跳转与刷新的方法汇总
Aug 30 Javascript
前端如何实现动画过渡效果
Feb 05 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
定义php常量的详解
2013/06/09 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
PHP Include文件实例讲解
2019/02/15 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
javascript脚本编程解决考试分数统计问题
2008/10/18 Javascript
常用简易JavaScript函数
2009/04/09 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
彻底解决 webpack 打包文件体积过大问题
2017/07/07 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
简单了解python模块概念
2018/01/11 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
Python docx库用法示例分析
2019/02/16 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
what is the difference between ext2 and ext3
2015/08/25 面试题
什么是servlet
2012/05/08 面试题
自考毕业生自我鉴定
2013/11/04 职场文书
会走路的树教学反思
2014/02/20 职场文书
群众路线自查报告及整改措施
2014/11/04 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书