Javascript JS中元素的类视差倾斜

这里的第一个问题是，如果我的语法或结构不太好，请友好一点：p

无论如何，我正在构建一个完整的html/js应用程序，它有一个简单的html结构，有4个div，可以根据屏幕大小进行缩放，并以50/50的网格格式进行布局

我想让这些div远离鼠标（根据x轴或y轴的不同强度）

编辑：我使用的一些计算结果并不太准确：

var centerX = $( 'html' ).width() / 2;
var centerY = $( 'html' ).height() / 2;
var oppositeposX = event.pageX - centerX;
var oppositeposY = event.pageY - centerY;
var offset = "skew(" + oppositeposX * -.05 + "deg," + oppositeposY * .02 + "deg)";

^这是我用来转换内容的计算。。。我相信一定有更好的方法来做到这一点，并取得更好的效果。我需要它倾斜的网页在相反的方向，好像重点放在鼠标的方向

编辑#2：我现在使用以下方法获得了一个好看的倾斜效果

$( "body" ).mousemove(function( event ) {
    var centerX = $( "body" ).width() / 2;
    var centerY = $( "body" ).height() / 2;
    var oppositeposX = event.pageX - centerX;
    var oppositeposY = event.pageY - centerY;
    var offset = "rotateY(" + -oppositeposX * .2 + "deg) rotateX(" + (1 * oppositeposY * .1) + "deg)";
    var rotate = {'transform' : offset};
    $(".container").css(rotate);
});

---

我认为您试图实现的效果可能更适合css 3d旋转，而不是倾斜

我对你的小提琴做了一些修改

1） 在主体上设置透视图。这将允许在3d空间中操作

.container

2） 将

transform

规则更改为使用

rotate

而不是

skew

3） 我改变了css，将这4个项目绝对定位，而不是浮动它们。这意味着他们将适应任何窗口的大小

无论如何，希望这能给你一个开始，达到你想要的效果

$（“#切换日志”）。单击（函数（）{
$（“#日志”）.toggle（100，function（）{
//动画完成。
});
});
$（“body”）.mousemove（函数（事件）{
var pos=“鼠标位置：”；
var centerX=$（“主体”）.width（）/2；
变量centerY=$（“body”）.height（）/2；
var oppositeposX=event.pageX-centerX；
var oppositeposY=event.pageY-centerY；
var offset=“rotateY（“+oppositex*.2+”度）rotateX（“+（-1*oppositeposY*.2）+”度）”；
var skew={'transform'：offset}；
var-oppositeskew={'transform'：offset}；
pos+=“x=“+event.pageX+”，“+”y=“+event.pageY；
$（“#mouselog”）.empty（）；
$（“#mouselog”）.append（pos）；
$（“#中心”）.empty（）；
$（“#中心”）。附加（“中心X=“+centerX+”，中心Y=“+centerY”）；
$（“#偏移量”）.empty（）；
$（“#offset”）.append（“Offest X=“+oppositeposX+”，Offest Y=“+oppositeposY”）；
$（“.container”）.css（倾斜）；
$（“#css”）.empty（）；
$（“#css”）。追加（抵销）；
});
html，正文{
身高：100%；
最小高度：100%；
}
身体{
-webkit透视图：1000px；
透视图：1000px；
溢出：隐藏；
}
#切换日志{
显示：块；
字体大小：10px；
位置：绝对位置；
排名：0；
右：0；
背景：rgba（0,0,0,0.6）；
颜色：#fff；
填充：4px；
边界半径：0.4px；
光标：指针；
}
.集装箱{
位置：绝对位置；
身高：100%；
排名：0；
底部：0；
左：0；
右：0；
}
.网格对象{
宽度：计算（50%-2px-4px）；
身高：50%；
保证金：1px；
文本对齐：居中；
背景：#aaa；
边框：1px实心#222；
位置：绝对位置；
左：0；
排名：0；
}
.grid对象+.grid对象{
左：50%；
}
.grid对象+.grid对象+.grid对象{
左：0；
最高：50%；
}
.grid对象+.grid对象+.grid对象+.grid对象+.grid对象{
左：50%；
最高：50%；
}
#日志{
位置：绝对位置；
字体大小：10px；
背景：rgba（0,0,0,6）；
颜色：#fff；
显示：块；
宽度：100%；
排名：0；
显示：无；
}

1.
2.
3.
4.
切换日志
我认为您尝试实现的效果可能更适合css 3d旋转，而不是倾斜

我对你的小提琴做了一些修改

1） 在主体上设置透视图。这将允许在3d空间中操作
.container

2） 将
transform
规则更改为使用
rotate
而不是
skew

3） 我改变了css，将这4个项目绝对定位，而不是浮动它们。这意味着他们将适应任何窗口的大小

无论如何，希望这能给你一个开始，达到你想要的效果


$（“#切换日志”）。单击（函数（）{
$（“#日志”）.toggle（100，function（）{
//动画完成。
});
});
$（“body”）.mousemove（函数（事件）{
var pos=“鼠标位置：”；
var centerX=$（“主体”）.width（）/2；
变量centerY=$（“body”）.height（）/2；
var oppositeposX=event.pageX-centerX；
var oppositeposY=event.pageY-centerY；
var offset=“rotateY（“+oppositex*.2+”度）rotateX（“+（-1*oppositeposY*.2）+”度）”；
var skew={'transform'：offset}；
var-oppositeskew={'transform'：offset}；
pos+=“x=“+event.pageX+”，“+”y=“+event.pageY；
$（“#mouselog”）.empty（）；
$（“#mouselog”）.append（pos）；
$（“#中心”）.empty（）；
$（“#中心”）。附加（“中心X=“+centerX+”，中心Y=“+centerY”）；
$（“#偏移量”）.empty（）；
$（“#offset”）.append（“Offest X=“+oppositeposX+”，Offest Y=“+oppositeposY”）；
$（“.container”）.css（倾斜）；
$（“#css”）.empty（）；
$（“#css”）。追加（抵销）；
});
html，正文{
身高：100%；
最小高度：100%；
}
身体{
-webkit透视图：1000px；
透视图：1000px；
溢出：隐藏；
}
#切换日志{
显示：块；
字体大小：10px；
位置：绝对位置；
排名：0；
右：0；
背景：rgba（0,0,0,0.6）；
颜色：#fff；
填充：4px；
边界半径：0.4px；
光标：指针；
}
.集装箱{
位置：绝对位置；
身高：100%；
排名：0；
底部：0；
左：0；
右：0；
}
.网格对象{
宽度：计算（50%-2px-4px）；
身高：50%；
保证金：1px；
文本对齐：居中；
背景：#aaa；
边框：1px实心#222；
位置：绝对位置；
左：0；
排名：0；
}
.grid对象+.grid对象{
左：50%；
}
.grid对象+.grid对象+.grid对象{
左：0；
最高：50%；
}
.grid对象+.grid对象+.grid-o