通过视差效果实现光滑的初始过渡到3D变换

Question

我一直在尝试这种效果：

https://codepen.io/PressOnThis/pen/NbmGPR

这个想法是存在的，但是当光标进入div时，你会注意到初始转换（或者此时缺少）是块状的。 （我已经将背景设置为洋红色以突出这些缺陷）到目前为止我已经尝试了一些事情，比如在它无限期地捕获鼠标位置之前的超时，但我仍然在努力实现那个光滑的过渡。这里的CSS转换显然没用，因为它需要捕获mousemove上的鼠标位置。

我怎样才能做到这一点？

Answer 1

我尝试根据图片缩放的进度减少图片旋转角度，请查看：https://codepen.io/pitetsky/pen/qqwOvB。

很抱歉没有评论的最佳代码。该代码是一个小实验的产物。所以，简而言之就是我所做的事情。

最好将rotateX和rotateY乘以图片中心缩放的进度商。一个棘手的问题是，通过CSS transition来缩放图片。

由于CSS过渡在浏览器中比没有特殊库的JS动画更轻松，我没有将图像缩放到JS。

相反，在每张mouseenter张图片中，我会在0.4秒内将scaleTransitionProgress的值从0略微更改为1，与css转换长度相同。类似地从mouseleave上的1到0。然后，在跟踪mousemove时，我会根据此值调整阻尼。

其他代码用于消除当鼠标进入其他图片时发生的一些问题，而前一个图片仍在进行中，或者当mouseleave仍在进行中时。

如果有任何问题，请向我询问。