如何使平滑rotate3d鼠标悬停？ [英] how to make smooth rotate3d mouse hover?

问题描述

如何使一个平滑的过渡3d旋转当鼠标进出盒子区域，我得到了一个代码下面，但是当我的鼠标从框区域，并从另一边进入框，元素过渡不移动顺利。

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.

代码：小提琴

$(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');
});});

推荐答案

如果我理解正确，OP的问题是，如果你使用鼠标在一侧离开jsfiddle的结果面板，绕过div并从另一侧再次输入，然后旋转将立即跳转到新的位置，没有任何转换。

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.

您在小提琴中有错误，包装程序的ID为 id =＃wrapper html。

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

编辑：我的第二个解决方案有一些错误，mousemove事件可以触发比css过渡结束更快，在一些浏览器中来回跳转。

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.

f只有JS的解决方案这是我的最终解决方案。

fiddle with JS only solution Here is my final solution.

我 throttled mousemove事件不经常。然后计算新的和旧的鼠标位置之间的几个步骤，并呈现转换与延迟，直到mousemove事件可能再次发生。

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.

一种方法到 throttling 的事件在此 stackoverflow answer 中。

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

我在JS之前做了这个。过渡似乎很顺利，但是不能超过0.2s，除非有跳跃问题。

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.

解决方案3

a href =https://jsfiddle.net/shirfy/0hd5hrcs/7/ =nofollow>解决方案1 ​​

fiddle with solution 1

ve添加了默认的中心位置到2个div，他们会返回到当你离开视口时。当鼠标在视口上方时，过渡更快，因此即使mousemove事件不是连续触发，旋转也应该是平滑的。

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

（我没有在css中包含供应商前缀。将需要在最终产品中，90vh是更好的在小提琴。）

(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.)

如果你不喜欢它div会返回中心：

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

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

---

您可能想要保存最后一个鼠标位置mouseleave作为js中的变量或作为 #wrapper 上的数据属性。然后，在mouseenter上计算旧和新位置之间的几个变换步骤，并将它们按顺序添加到2个div。可能是一个更好的解决方案，比我的解决方法更少可能的错误。

---

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.

这篇关于如何使平滑rotate3d鼠标悬停？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！