基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。
实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性
从而通过改变transform：rotate属性值来达到3d立方体旋转的效果
HTML代码块：
<body> <inputtype="button"class="open"value="点击散开"/> <inputtype="text"class="xNum"value=""/>//X轴旋转角度 <inputtype="text"class="yNum"value=""/>//Y轴旋转角度 <inputtype="text"class="zNum"/> <divclass="big_box"> <divclass="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: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:right;
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:bottom;
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代码块：
<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>
以上所述是小编给大家介绍的基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转 的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！