基于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脚本
Dec 12 Javascript
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
easyui validatebox验证
Apr 29 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
快速了解vue-cli 3.0 新特性
Feb 28 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
Dec 29 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
vue element table中自定义一些input的验证操作
Jul 18 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 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
表格展示无限级分类(PHP版)
2012/08/21 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
基于PHP给大家讲解防刷票的一些技巧
2015/11/18 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
Python微信操控itchat的方法
2019/05/31 Python
Python 串口读写的实现方法
2019/06/12 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
高一新生军训感言
2014/03/02 职场文书
促销活动总结
2014/04/28 职场文书
医院合作协议书
2014/08/19 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
计划生育工作汇报
2014/10/28 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
小学生禁毒教育心得体会
2016/01/15 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript