как сделать гладкий поворот3d наведение мыши?

Как сделать плавный переход 3d вращаться, когда мышь в или из области окна, я получил код ниже, но когда моя мышь вышла из области окна и в поле ввода с другой стороны, переход элемента не движется плавно ,как сделать гладкий поворот3d наведение мыши?

код: 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'); 
});});

источник

2015-10-13 Riantori

Ваша скрипка кажется неповрежденной (в Chrome); Я не мог видеть проблему, которую вы описали. Поскольку mousemove правильно прикреплен к документу, проблем не должно быть. Если вы не тестируете какой-либо уступающий браузер. – Ingmars

Я тестировал на хром и firefox, и он работает, можете ли вы уточнить, что вы хотите сделать PLZ? – Mimouni

Я думаю, что OP означает, что прямо сейчас, если вы медленно двигаете мышью, вы можете увидеть, что перевод/ротации обновляется с небольшими прыжками, но он/она хочет, чтобы это произошло более плавно. –

Если я понимаю правильно, проблема OP является то, что если вы оставите jsfiddle в «результате» панель с помощью мыши на одной стороне, обойдите DIV и ввести его еще раз с другими стороны, то вращение сразу перейдет в новую позицию без каких-либо переходов.

Вы имели ошибку в скрипку, ID обертка была в HTML id="#wrapper".

Редактировать: У моего второго решения были некоторые ошибки, событие mousemove может быть запущено быстрее, чем переход css завершается, и это заставляло элементы прыгать назад и вперед в некоторых браузерах.

fiddle with JS only solution Вот мое окончательное решение.

I throttled Событие mousemove для стрельбы реже. Затем вычислил несколько шагов между новыми и старыми позициями мыши и визуализировал преобразования с задержкой до тех пор, пока событие mousemove не сможет снова запустить огонь.

Способ throttling событие в этом stackoverflow answer.

Я сделал это перед JS одним. Переход кажется очень гладким, но не может сделать его быстрее, чем 0,2 с, если у него нет проблемы с прыжками.

fiddle with solution 3

fiddle with solution 1

Я добавил позиции по умолчанию в центре на 2-дивы, и они вернутся к тому, что при выходе из окна просмотра. Хотя мышь находится над окном просмотра, переход выполняется быстрее, поэтому вращение должно быть плавным, даже если событие mousemove не срабатывает достаточно непрерывно.

Обратите внимание, что у этого есть некоторые ошибки, хотя, перемещение мыши немного быстрее может заставить divs прыгать назад и вперед в 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 было лучше в скрипке.)

Если вам не нравится это, что дивы вернуться в центр:

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

Возможно, вы захотите сохранить последнюю позицию мыши до мыши или как переменные в js или как атрибуты данных на #wrapper. Затем в mouseenter вычислите несколько шагов преобразования между старыми и новыми позициями и добавьте их в 2 divs в последовательности. Возможно, это лучшее решение с менее вероятными ошибками, чем мои обходные пути.

источник

2015-10-13 21:31:20 shirfy

Привет, мне нравится ваше решение, но когда я пытаюсь решить 2, у них все еще есть прыжки и небольшая задержка при обновлении вращения, – Riantori

Вы правы, я скоро обновлю ответ, я придумал некоторые решения. – shirfy

Awesome, .. спасибо @shirfy – Riantori

<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>

источник

2015-10-17 11:05:05

Это будет работать без jquery с плавным вращением –

как сделать гладкий поворот3d наведение мыши?

ответ

Смежные вопросы