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

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

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

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

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

HTML代码块：

XML/HTML Code复制内容到剪贴板
  1. <body>
  2. <inputtype="button"class="open"value="点击散开"/>
  3. <inputtype="text"class="xNum"value="0"/>//X轴旋转角度
  4. <inputtype="text"class="yNum"value="0"/>//Y轴旋转角度
  5. <inputtype="text"class="zNum"/>
  6. <divclass="big_box">
  7. <divclass="box">
  8. <span>1</span>
  9. <span>2</span>
  10. <span>3</span>
  11. <span>4</span>
  12. <span>5</span>
  13. <span>6</span>
  14. </div>
  15. </div>
  16. </body>

CSS代码块：

CSS Code复制内容到剪贴板
  1. <style>
  2. body{cursor:url("img/openhand1.png"),auto;}
  3. .big_box{
  4. width:500px;
  5. height:500px;
  6. margin:200pxauto;
  7. }
  9. .box{
  10. -webkit-transform-style:preserve-3d;
  11. -moz-transform-style:preserve-3d;
  12. -ms-transform-style:preserve-3d;
  13. transform-style:preserve-3d;
  14. transform-origin:100px100px00px;
  15. position:relative;
  16. transform:rotatex(0deg)rotatey(0deg)rotatez(0deg)scale3d(0.7,0.7,0.7);
  17. }
  18. .boxspan{
  19. transition:all1slinear;
  21. }
  22. span{
  23. display:block;
  24. position:absolute;
  25. width:200px;
  26. height:200px;
  27. box-sizing:border-box;
  28. border:1pxsolid#999;
  29. /*opacity:0.7;*/
  30. text-align:center;
  31. line-height:200px;
  32. font-size:60px;
  33. font-weight:700;
  34. border-radius:12%;
  36. }
  37. .boxspan:nth-child(1){
  38. background-color:deepskyblue;
  39. transform-origin:left;
  40. transform:rotatey(-90deg)translatex(-100px);//左
  41. }
  42. .boxspan:nth-child(2){
  43. background-color:red;
  44. transform-origin:rightright;
  45. transform:rotatey(90deg)translatex(100px);//右
  47. }
  49. .boxspan:nth-child(3){
  50. background-color:green;
  51. transform-origin:top;
  52. transform:rotatex(90deg)translatey(-100px);//上
  54. }
  55. .boxspan:nth-child(4){
  56. background-color:#6633FF;
  57. transform-origin:bottombottom;
  58. transform:rotatex(-90deg)translatey(100px);//下
  59. }
  60. .boxspan:nth-child(5){
  61. background-color:gold;
  62. transform:translatez(-100px);//后
  63. }
  64. .boxspan:nth-child(6){
  66. background-color:#122b40;
  67. transform:translatez(100px);//前
  68. }
  69. .box:hoverspan{
  71. opacity:0.3;
  72. }
  73. .box:hover{
  74. animation-play-state:paused;//设置动画暂停
  75. }
  76. </style>

JS代码块：

JavaScript Code复制内容到剪贴板
  1. <script>
  2. move();
  4. clickBox();
  6. //鼠标按下且移动时触发，
  8. functionmove(){
  9. varbody=document.querySelector("body");
  10. varbox=document.querySelector(".box");
  11. varxNum=document.querySelector(".xNum");
  12. varyNum=document.querySelector(".yNum");
  13. varx=0,y=0,z=0;
  14. varxx=0,yy=0;
  15. varxArr=[],yArr=[];
  16. window.onmousedown=function(e){//鼠标按下事件
  17. body.style.cursor='url("img/closedhand1.png"),auto';
  18. xArr[0]=e.clientX/2;//获取鼠标点击屏幕时的坐标
  19. yArr[0]=e.clientY/2;
  20. window.onmousemove=function(e){//鼠标移动事件————当鼠标按下且移动时触发
  21. xArr[1]=e.clientX/2;//获取鼠标移动时第一个点的坐标
  22. yArr[1]=e.clientY/2;
  23. yy+=xArr[1]-xArr[0];//获得鼠标移动的距离
  24. xx+=yArr[1]-yArr[0];
  25. xNum.value=xx+"°";//将所获得距离数字赋值给input显示旋转角度
  26. yNum.value=yy+"°";
  27. //将旋转角度写入transform中
  28. box.style.transform="rotatex("+xx+"deg)rotatey("+yy+"deg)rotatez(0deg)scale3d(0.7,0.7,0.7)";
  29. xArr[0]=e.clientX/2;
  30. yArr[0]=e.clientY/2;
  31. }
  33. };
  34. window.onmouseup=function(){//鼠标抬起事件————用于清除鼠标移动事件，
  35. body.style.cursor='url("img/openhand1.png"),auto';
  36. window.onmousemove=null;
  37. }
  38. }
  39. //点击事件、负责立方体盒子的六面伸展
  40. functionclickBox(){
  41. varbtn=document.querySelector(".open");
  42. varbox=document.querySelector(".box");
  43. varson=box.children;
  44. varvalue=0;
  45. //存储立方体散开时的transform参数
  46. vararr0=["rotatey(-90deg)translatex(-100px)","rotatey(90deg)translatex(100px)","rotatex(90deg)translatey(-100px)",<br>"rotatex(-90deg)translatey(100px)","translatez(-100px)","translatez(100px)"];
  47. //存储立方体合并时的transform参数
  48. 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)"];
  49. btn.onclick=function(){
  50. if(value==0){
  51. value=1;
  52. btn.value="点击合并";
  53. for(vari=0;i<arr1.length;i++){
  54. son[i].style.transform=arr1[i];
  55. console.log(son[i])
  56. }
  57. }elseif(value==1){
  58. value=0;
  59. btn.value="点击散开";
  60. for(varj=0;j<arr0.length;j++){
  61. son[j].style.transform=arr0[j];
  62. console.log(j);
  64. }
  65. }
  66. };
  67. }
  68. </script>

以上就是css3 transform及原生javascript如何实现鼠标拖动3D立方体旋转。人若在面临抉择而无法取舍的时候，应该选择自己尚未经验过的那一个。更多关于css3 transform及原生javascript如何实现鼠标拖动3D立方体旋转请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
基于CSS 判断鼠标进入的方向
CSS如何实现鼠标移至图片上显示遮罩层效果
html+css+javascript如何实现跟随鼠标移动显示选中效果
如何利用HTML+CSS如何实现跟踪鼠标移动功能
详解CSS如何实现仿Windows10鼠标照亮边框效果