本文主要包含css3鼠标拖动3D立方体旋转,js鼠标拖动3D立方体旋转,css3,3D立方等相关知识,佚名 希望在学习及工作中可以帮助到您
本文通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3D立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。
实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性。
从而通过改变transform：rotate属性值来达到3D立方体旋转的效果：
HTML代码块：
- <body>
- <input type="button" class="open" value="点击散开"/>
- <input type="text" class="xNum" value="0"/>//X轴旋转角度
- <input type="text" class="yNum" value="0"/>//Y轴旋转角度
- <input type="text" class="zNum"/>
- <div class="big_box">
- <div class="box">
- <span>1</span>
- <span>2</span>
- <span>3</span>
- <span>4</span>
- <span>5</span>
- <span>6</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;