Question

我正在尝试弄清楚如何使用.draggable（）来让访问者拖动以旋转3D div。目前div旋转但也垂直和水平移动，使得过程敏感且不可预测。我希望div的原点保持固定，并且“拖动”只会影响旋转，因此用户可以“旋转”div来查看其他边。

这是指向codepen的链接：http://codepen.io/armandhammer8/pen/IiBga

$（ '动漫'）。可拖动（{ 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的内置功能可以解决您的问题。

自行获取功能并停止使用可拖动功能并不困难。

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

在3D css元素上使用Jquery .draggable（）进行3D旋转

1 个答案:

demo