jquery-ui - 在 3D css 元素上使用 Jquery .draggable() 进行 3D 旋转

Question

我正在尝试弄清楚如何使访问者能够使用 .draggable() 拖动以旋转 3D div。目前，div 会旋转，但也会垂直和水平移动，这使得该过程变得棘手且不可预测。我希望 div 的原点保持固定，“拖动”只影响旋转，因此用户可以“旋转”div 以查看另一面。

这是代码笔的链接:http://codepen.io/armandhammer8/pen/IiBga

$('.anime').draggable({ drag: function(event, ui){

var rotateCSS = 'rotate(' + ui.position.left + 'deg)';

$(this).css({
  'transform': rotateCSS,
  '-moz-transform': rotateCSS,
  '-webkit-transform': rotateCSS
});

提前致谢!

div 元素是一个小房子:

我希望能够旋转它

Answer 1

draggable 的内置功能给你带来了问题。

自行获取功能并停止使用 draggable 并不难。

Javascript:

var offset = 0, startX;
var elem = document.getElementById("element");
$('.draggable').on('mousedown', function (e) {
        startX = e.pageX - offset;
    })
    .on('mouseup', function() {
        startX = null;
    })
    .on('mousemove', function (e) {
        if(startX) {
           offset = e.pageX - startX;
           elem.style['-webkit-transform'] = 'rotateY(' + offset + 'deg)';
        }
    });

demo