3D rotation using Jquery .draggable() on 3D css element

Question

I'm trying to figure out how to enable visitors to drag to rotate a 3D div using .draggable(). Currently the div rotates but also moves vertically and horizontally making the process touchy and unpredictable. I would like the origin of the div to stay fixed, and the "dragging" to only affect the rotation, so users can "spin" the div around to see the other sides.

here is link to the codepen: 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 });

Thanks in advance!

The div element is a little house:

I want to be able to spin it around

vals · Accepted Answer · 2014-02-26 18:33:41Z

The built in functionality of draggable is giving you the problems.

It's not so hard to get the functionality by yourself and stop using 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)'; } });

Collectives™ on Stack Overflow

3D rotation using Jquery .draggable() on 3D css element

1 Answer 1

demo

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related