Question

我有一个用CSS制作的3D立方体，它在悬停时完美旋转。

我需要的是添加可拖动功能以使其随鼠标旋转。

到目前为止，我有这个：

为了完成悬停工作，您需要取消注释以下CSS：

/*.box-scene:hover .box {
    -webkit-transform: rotateY(-90deg);
}*/

我使用JQueryUI中的draggable函数来尝试使其工作但不知何故它无法正常工作。

PS：我只需要它在Y轴上旋转。

任何帮助都会被批评。

Answer 1

好的，所以我最终得到了它。

显然，错误是如果没有SSL请求它们，JSFiddle不会加载外部资源。

最初加载的代码实际上是正确的。

最后的工作小提琴是：

JSFiddle

最终Javascript：

var offset = 0, startX;
var elem = document.getElementById("box");
$('#box-scene').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)';
    }
});

感谢@Andrew和@Armand Maree的帮助。

希望这有助于将来参考。

Answer 2

我认为拖延不是你想要的;该小部件允许您在页面上移动对象。看起来您希望能够单击鼠标并移动它，然后看到立方体按比例旋转您移动鼠标的距离。我不知道在纯CSS中使用那个的方法，我建议javascript类似于以下内容：

var dragging = false;
var originalX;
cube.mouseDown(function(e){
   originalX =  e.pageX;
   dragging = true;
});
cube.mouseUp(function(e){
    dragging = false;
});
cube.mouseMove(function(e){
    if (dragging){
        var DeltaX = e.pageX - originalX;
        var rotation = CalculateRotationDegrees(DeltaX);
        cube.css('transform',rotation);
    }
});

在此示例中，方法CalculateRotationDegrees将获取用户移动鼠标的距离，并根据该距离计算出多维数据集应旋转的距离。

Answer 3

一个想法是有一个布尔变量，指示是否按下了鼠标按钮。然后在鼠标移动时调整旋转。

var mouseDown = false;

var mouseButtonDown = function ()  {
    mouseDown = true;
} 

var mouseButtonUp = function ()  {
    mouseDown = false;
} 

var mouseMove = function (event) {
    if(mouseDown) {
        // get mouse coordinates and do rotation in jquery
   } 
}

HTML： <div onmousedown="mouseButtonDown" onmouseup="mouseButtonUp" onmousemove="mouseMove"></div>

在拖动

3 个答案: