how to make smooth rotate3d mouse hover?

Question

how to make a smooth transition 3d rotate when mouse in or out from the box area, i got a code below but when my mouse out from the box area and enter to box from the other side, the element transition is not moving smoothly.

code : fiddle

$(document).ready(function () {
var $one = $('#div1'),
    $two = $('#div2'),
    browserPrefix = "",
    usrAg = navigator.userAgent;
if(usrAg.indexOf("Chrome") > -1 || usrAg.indexOf("Safari") > -1) {
    browserPrefix = "-webkit-";
} else if (usrAg.indexOf("Opera") > -1) {
    browserPrefix = "-o";
} else if (usrAg.indexOf("Firefox") > -1) {
    browserPrefix = "-moz-";
} else if (usrAg.indexOf("MSIE") > -1) {
    browserPrefix = "-ms-";
}

$(document).mousemove(function (event) {
    var cx = Math.ceil(window.innerWidth / 2.0),
        cy = Math.ceil(window.innerHeight / 2.0),
        dx = event.pageX - cx,
        dy = event.pageY - cy,
        tiltx = (dy / cy),
        tilty = - (dx / cx),
        radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2)),
        degree = (radius * 15);

        shadx = degree*tiltx;   /*horizontal shadow*/
        shady = degree*tilty;   /*vertical shadow*/

    $one.css(browserPrefix + 'transform', 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');
    $two.css(browserPrefix + 'transform', 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');



    if(dx>cx) /*without that horizontal values are reversed*/
        $('#div1, #div2').css('box-shadow', + (-shady) + 'px ' + (-shadx) +'px 5px #3D352A');
    else $('#div1, #div2').css('box-shadow', + shady + 'px ' + (-shadx) +'px 5px #3D352A');
});});

Your fiddle seems intact (in Chrome); I was not able to see a problem you described. Since mousemove is properly attached to a document there should not be any problems. Unless you are testing on some inferior browser. — Ingmars, Oct 13 '15 at 11:19
i tested on chrome and firefox, and it works , can you clarify what you want to do plz ? — Mimouni, Oct 13 '15 at 11:22
I think OP means that right now, if you move your mouse slowly, you can see the translation/rotations getting updated with little jumps, but he/she wants it to happen more smoothly — Timothy Groote, Oct 13 '15 at 11:35
I think your limiting factor is how often / when a mouse move event is fired. it's worth looking into `requestAnimationFrame` and setting up a draw loop, then using easing to smooth out the animation. — Timothy Groote, Oct 13 '15 at 11:53
like what Timothy said, i mean how to remove those little jump rotation when the mouse pointer enter the box area and make more smoothly.. — Riantori, Oct 14 '15 at 05:38

score 2 · Accepted Answer · edited May 23 '17 at 11:52

If I understand right, OP's problem is that if you leave the jsfiddle's "result" panel with the mouse at one side, go around the div and enter it again from the other side, then the rotation would jump to the new position immediately without any transitions.

You had an error in the fiddle, the wrapper's ID was id="#wrapper" in the html.

Edit: My second solution had some errors, the mousemove event can be triggered faster than the css transition ends and it caused the elements to jump back and forth in some browsers.

fiddle with JS only solution Here is my final solution.

I throttled the mousemove event to fire less often. Then calculated a few steps between the new and old mouse positions and rendered the transforms with a delay until the mousemove event could fire again.

A way to throttling an event is in this stackoverflow answer.

I made this before the JS one. The transition seems to be very smooth, but couldn't make it faster than 0.2s unless having the jumping issue.

fiddle with solution 3

fiddle with solution 1

I've added a default centered position to the 2 divs and they would return to that when you leave the viewport. While the mouse is above the viewport the transition is faster, so the rotation should be smooth even if the mousemove event isn't firing quite continuously.

Please note this has some bugs though, moving the mouse a bit faster can make the divs jump back and forth in Firefox.

CSS:

#wrapper {
    width: 100%;
    height: 90vh;
}

#wrapper:hover #div1,
#wrapper:hover #div2 {
    transition: transform 0.05s linear, box-shadow 0.05s linear;
}

#div1,
#div2 {
    transform: rotate3d(0,0,0,0deg);
    box-shadow: 0 0 5px #3D352A;
    transition: transform 0.3s linear, box-shadow 0.3s linear;
}

JS:

$(document).mouseleave(function (event) {
    $one.removeAttr('style');
    $two.removeAttr('style');
});

(I didn't include the vendor prefixes in the css. Also fix the wrapper's height to something you will need in the final product, the 90vh was better in the fiddle.)

If you don't like it that the divs return to the center:

fiddle with solution 2

CSS:

.mouse-enter #div1,
.mouse-enter #div2 {
    transition: transform 0.2s linear, box-shadow 0.2s linear;
}

JS:

$(document).mouseenter(function (event) {
    $('#wrapper').addClass('mouse-enter');
    setTimeout(function(){ $('#wrapper').removeClass('mouse-enter'); }, 400);
});

You might want to save the last mouse position before mouseleave either as variables in js or as data attributes on #wrapper. Then, on mouseenter calculate a few transform steps between the old and new positions and add those to the 2 divs in sequence. Might be a better solution with less possible bugs than my workarounds.

Hi, i like your solution but when i try solution 2, ther is still have some jumping and little bit delay when the rotation updated , — Riantori, Oct 14 '15 at 05:51
You're right, I'll update my answer soon, I came up with some solutions. — ezattilabatyi, Oct 14 '15 at 17:56

score 0 · Answer 2 · answered Oct 17 '15 at 11:05

   <div></div>
      <style>
div {
     width: 200px;
     height: 100px;
     background-color: yellow;
     transition: all 1s;
         }

div:hover{
       -moz-transform: rotate(7deg); 
     -o-transform: rotate(7deg); 
    -webkit-transform: rotate(7deg); 
    transform: rotate(180deg);
         }
    </style>

how to make smooth rotate3d mouse hover?

2 Answers2

Linked