使用CSS和Jquery在鼠标按下时移动旋转的立方体

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)');
  }); 
})

我需要这种平滑移动，但仅在鼠标单击时。 鼠标按下不起作用。谢谢。

- Ryan Mc

---

也许你可以尝试在.cube上使用transition: 0.9s all linear来实现平滑滚动。 - xaid

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" );
  });

  }); 
})

- Ryan Mc