脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → css3 transform js 3d立体旋转

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

 更新时间：2016年06月12日 13:47:17   作者：笛声如诉人影茫  
这篇文章主要介绍了基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转 的相关资料,需要的朋友可以参考下

通过原生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立方体旋转 的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 菜鸟也能搞懂js中typeof与instanceof区别

    菜鸟也能搞懂js中typeof与instanceof区别

    instanceof和typeof是两个运算符，在程序设计中用到，常用来判断一个变量是否为空，或者是什么类型的，本文就来介绍一下typeof与instanceof区别，感兴趣的可以了解一下
    2021-09-09
  • js点击出现悬浮窗效果不使用JQuery插件

    js点击出现悬浮窗效果不使用JQuery插件

    JQuery有很多这样的插件，但本文的这个是跟着自己的想法写的，也不知道他人是如何实现的，感兴趣的朋友可以了解下
    2014-01-01
  • 利用MutationObserver实现计算首屏时间

    利用MutationObserver实现计算首屏时间

    在前端开发中，优化页面性能是至关重要的，计算首屏时间是衡量网页性能的重要指标，本文将介绍如何使用MutationObserver来获取首屏时间的最佳实践，感兴趣的可以了解下
    2023-07-07
  • JavaScript 异步调用框架 (Part 2 - 用例设计)

    JavaScript 异步调用框架 (Part 2 - 用例设计)

    在上一篇文章里说到，我们要设计一个异步调用框架，最好能够统一同步异步调用的接口，同时具体调用顺序与实现方式无关。那么我们现在就来设计这样一个框架的用例。
    2009-08-08
  • 手写TypeScript 时很多人常犯的几个错误

    手写TypeScript 时很多人常犯的几个错误

    这篇文章主要介绍了手写TypeScript 时很多人常犯的几个错误，文章围绕主题展开详细的内容介绍，具有一定的抽卡，重要的朋友可以参考一下
    2022-09-09
  • 基于JS制作一个简单的网页版地图

    基于JS制作一个简单的网页版地图

    本文将利用JS实现一个简单的网页版地图，这个简单的网页版地图能根据城市名进行位置查询。文中的示例代码讲解详细，感兴趣的可以了解一下
    2022-05-05
  • js 将多个对象合并成一个对象 assign方法的实现

    js 将多个对象合并成一个对象 assign方法的实现

    这篇文章主要介绍了js 将多个对象合并成一个对象 assign方法的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • JavaScript实现向setTimeout执行代码传递参数的方法

    JavaScript实现向setTimeout执行代码传递参数的方法

    这篇文章主要介绍了JavaScript实现向setTimeout执行代码传递参数的方法,分析了向setTimeout传递参数的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • echarts图表设置宽度100%结果为100px的解决办法

    echarts图表设置宽度100%结果为100px的解决办法

    在开发一个前端项目时需要用到Element-ui的el-tabs组件和Echart开源库,当两者嵌套使用时,我给Echart中的图表宽度设置为了100%,但是实际的宽度却只有100px,这篇文章主要给大家介绍了关于echarts图表设置宽度100%结果为100px的解决办法,需要的朋友可以参考下
    2022-12-12
  • 客户端验证用户名和密码的方法详解

    客户端验证用户名和密码的方法详解

    这篇文章主要介绍了客户端验证用户名和密码 的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06

最新评论