热搜：编程 Python Microsoft 编程语言 C++

css3 transform及原生javascript如何实现鼠标拖动3D立方体旋转

发布时间：2023-05-23 11:00:08 来源：互联网

.

往前走，一片诱人的新绿尽收眼底，那是满池的新荷。荷叶有的平展着圆盘浮在水面上；有的绿伞般在空中摇曳；有的兜着水珠把阳光反射得灿烂夺目；有的长得非常高，却未展开叶面，勇敢地挺立着。荷花则多半含苞待放，白中透粉的一朵朵花儿，活像一个个花仙子借着微风，在池中裙袂飞扬，翩然起舞。

本文通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3D立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。

实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性。

从而通过改变transform：rotate属性值来达到3D立方体旋转的效果：

HTML代码块：

XML/HTML Code复制内容到剪贴板

<body>
<inputtype="button"class="open"value="点击散开"/>
<inputtype="text"class="xNum"value="0"/>//X轴旋转角度
<inputtype="text"class="yNum"value="0"/>//Y轴旋转角度
<inputtype="text"class="zNum"/>
<divclass="big_box">
<divclass="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</div>
</body>

CSS代码块：

CSS Code复制内容到剪贴板

<style>
body{cursor:url("img/openhand1.png"),auto;}
.big_box{
width:500px;
height:500px;
margin:200pxauto;
}
.box{
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
transform-origin:100px100px00px;
position:relative;
transform:rotatex(0deg)rotatey(0deg)rotatez(0deg)scale3d(0.7,0.7,0.7);
}
.boxspan{
transition:all1slinear;
}
span{
display:block;
position:absolute;
width:200px;
height:200px;
box-sizing:border-box;
border:1pxsolid#999;
/*opacity:0.7;*/
text-align:center;
line-height:200px;
font-size:60px;
font-weight:700;
border-radius:12%;
}
.boxspan:nth-child(1){
background-color:deepskyblue;
transform-origin:left;
transform:rotatey(-90deg)translatex(-100px);//左
}
.boxspan:nth-child(2){
background-color:red;
transform-origin:rightright;
transform:rotatey(90deg)translatex(100px);//右
}
.boxspan:nth-child(3){
background-color:green;
transform-origin:top;
transform:rotatex(90deg)translatey(-100px);//上
}
.boxspan:nth-child(4){
background-color:#6633FF;
transform-origin:bottombottom;
transform:rotatex(-90deg)translatey(100px);//下
}
.boxspan:nth-child(5){
background-color:gold;
transform:translatez(-100px);//后
}
.boxspan:nth-child(6){
background-color:#122b40;
transform:translatez(100px);//前
}
.box:hoverspan{
opacity:0.3;
}
.box:hover{
animation-play-state:paused;//设置动画暂停
}
</style>

JS代码块：

JavaScript Code复制内容到剪贴板

<script>
move();
clickBox();
//鼠标按下且移动时触发，
functionmove(){
varbody=document.querySelector("body");
varbox=document.querySelector(".box");
varxNum=document.querySelector(".xNum");
varyNum=document.querySelector(".yNum");
varx=0,y=0,z=0;
varxx=0,yy=0;
varxArr=[],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;
}
}
//点击事件、负责立方体盒子的六面伸展
functionclickBox(){
varbtn=document.querySelector(".open");
varbox=document.querySelector(".box");
varson=box.children;
varvalue=0;
//存储立方体散开时的transform参数
vararr0=["rotatey(-90deg)translatex(-100px)","rotatey(90deg)translatex(100px)","rotatex(90deg)translatey(-100px)",<br>"rotatex(-90deg)translatey(100px)","translatez(-100px)","translatez(100px)"];
//存储立方体合并时的transform参数
vararr1=["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(vari=0;i<arr1.length;i++){
son[i].style.transform=arr1[i];
console.log(son[i])
}
}elseif(value==1){
value=0;
btn.value="点击散开";
for(varj=0;j<arr0.length;j++){
son[j].style.transform=arr0[j];
console.log(j);
}
}
};
}
</script>