我创建了这个伟大的徽标动画，它改变了css视角，因此徽标看起来朝向鼠标光标。这非常流畅，但是在浏览器窗口中移动鼠标几秒后，动画变得不稳定，特别是在Firefox中，但在一段时间后也在Safari中。
我无法理解为什么会这样，但它几乎就像某处有韭菜一样。
我有任何想法，那么我会非常感激。非常感谢！
jQuery(document).ready(function(){
jQuery(document).ready(function(){
// Detect browser width
$(document).ready(function(){
current_width = $(window).width();
current_height = $(window).height();
});
// Update browser width if it changes
$(window).resize(function(){
current_width = $(window).width();
current_height = $(window).height();
});
// Change perspective CSS based on mouse position
$(window).mouseenter(function() {
$(document).mousemove(function(e){
// Variables that control the extent of the affect of the CSS.
// Logo
var logoRotateY = 12;
logoRotateX = 12;
// Background 1
bg1RotateY = 10;
bg1RotateX = 10;
bg1RotateR = 100;
bg1RotateT = 100;
// Background 2
bg2RotateY = 8;
bg2RotateX = 8;
bg2RotateR = 80;
bg2RotateT = 80;
// Background 3
bg3RotateY = 6;
bg3RotateX = 6;
bg3RotateR = 60;
bg3RotateT = 60;
// Specify items within an array called kits. Then create an object with curly brackets around (to specify css)
var kits = ['-webkit-transform','-moz-transform','-ms-transform','transform'],
obj = {};
// The following variables are specified here and called later on (to save typing multiple times).
pagex = (e.pageX-(current_width/2))/1000,
pagey = (e.pageY-(e.pageY*2-600)-(current_height/2)) /1000;
// Also zero the transition when mouseenters to prevent jerky animation. This is called later on.
var zerostyles = {'-webkit-transition': "-webkit-transform 0s linear 0s",
'transition': "transform,-ms-transform,-moz-transform 0s linear 0s"};
// Now we are spcifying the left and right attributes for the background images. These are controlled by the variables above
var bg1right = {'right': + pagex * bg1RotateR + "px"};
var bg1top = {'top': + pagey * bg1RotateT + "px"};
var bg2right = {'right': + pagex * bg2RotateR + "px"};
var bg2top = {'top': + pagey * bg2RotateT + "px"};
var bg3right = {'right': + pagex * bg3RotateR + "px"};
var bg3top = {'top': + pagey * bg3RotateT + "px"};
// The main logo. Here we are saying "for each value in the array 'kits' loop round.
$.each(kits, function(k,val) {
obj[val] = "rotateY(" + pagex * logoRotateY + "deg) rotateX(" + pagey * logoRotateX + "deg)";
});
// Now we have got the looping information in an object called obj we can put it in the css for #logo
$('#logo').css(obj);
$('#logo').css(zerostyles);
// Next is the first background image. Same thing again.
$.each(kits, function(k,val) {
obj[val] = "rotateY(" + pagex * bg1RotateY + "deg) rotateX(" + pagey * bg1RotateX + "deg)"
});
$('#logo-bg-1').css(obj);
$('#logo-bg-1').css(zerostyles);
$('#logo-bg-1').css(bg1right);
$('#logo-bg-1').css(bg1top);
// Next is the second background image. Same thing again.
$.each(kits, function(k,val) {
obj[val] = "rotateY(" + pagex * bg2RotateY + "deg) rotateX(" + pagey * bg2RotateX + "deg)";
});
$('#logo-bg-2').css(obj);
$('#logo-bg-2').css(zerostyles);
$('#logo-bg-2').css(bg2right);
$('#logo-bg-2').css(bg2top);
// Next is the third background image. Same thing again.
$.each(kits, function(k,val) {
obj[val] = "rotateY(" + pagex * bg3RotateY + "deg) rotateX(" + pagey * bg3RotateX + "deg)";
});
$('#logo-bg-3').css(obj);
$('#logo-bg-3').css(zerostyles);
$('#logo-bg-3').css(bg3right);
$('#logo-bg-3').css(bg3top);
// This section zeros the css rotation when the mouse leaves the page
}).mouseleave(function(e) {
var pageX = e.pageX || e.clientX,
pageY = e.pageY || e.clientY;
if (pageX == 0 || pageY == 0) {
return;
}
// This creates a transition when the mouse leaves the page to make it moothly snap back to centre
$('#logo, #logo-bg-1, #logo-bg-2, #logo-bg-3').css({
'-webkit-transition': "-webkit-transform 0.2s, right 0.2s, top 0.2s",
'transition': "transform 0.2s,-ms-transform 0.2s,-moz-transform 0.2s, right 0.2s, top 0.2s",
'-webkit-transform': "rotateY(0deg) rotateX(0)",
'transform': "rotateY(0deg) rotateX(0)",
'-ms-transform': "rotateY(0deg) rotateX(0)",
'-moz-transform': "rotateY(0deg) rotateX(0)",
'right': "0",
'top': "0"
});
});
});
})