在 3D css 元素上使用 Jquery .draggable() 进行 3D 旋转答案

【问题标题】：3D rotation using Jquery .draggable() on 3D css element在 3D css 元素上使用 Jquery .draggable() 进行 3D 旋转
【发布时间】：2014-02-25 06:07:08
【问题描述】：

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

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

$('.anime').draggable({ 拖动：函数（事件，用户界面）{

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

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

提前致谢！

div元素是一个小房子：

我希望能够旋转它

【问题讨论】：

标签： jquery-ui css 3d rotation draggable

【解决方案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)';
        }
    });

demo

【讨论】：