Question

我正在尝试创建一个旋转立方体，可以通过单击立方体并拖动它来将用户移动到他们想要的特定面。我现在有一些东西在屏幕周围鼠标移动时移动但是这使得很难控制你想要的那一面，而且你无法阻止立方体旋转。

请参阅此codepen以获取我所拥有的示例：https://codepen.io/ryan_pixelers/pen/kkVErB

使多维数据集旋转的jquery代码

$(function(){
  $(window).mousemove(function(e){
    $('.cube').css('transform', 'rotateX(' + - e.pageY + 'deg)' +     'rotateY(' + e.pageX + 'deg)');
  }); 
})

我需要这种平滑的动作，但只有在点击鼠标时才需要。 Mousedown不起作用。

谢谢

Answer 1

好吧，我想我自己回答了这个问题，然后问：

更新了jquery：

$(function(){
  $(window).mousedown(function(){
  $(window).mousemove(function(e){
      $('.cube').css('transform', 'rotateX(' + - e.pageY + 'deg)' + 'rotateY(' + e.pageX + 'deg)');
  });

  $(window).mouseup(function(){
    $(this).off( "mousemove" );
  });

  }); 
})

使用CSS和Jquery在mousedown上移动一个旋转的立方体

1 个答案: