好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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

基于css3新属性transform,实现3d立方体的旋转

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

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

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

  HTML代码块:

           //X轴旋转角度     //Y轴旋转角度         

1 2 3 4 5 6

查看更多关于基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转_html/css_WEB-的详细内容...

  阅读:37次