实现到具有视差效果的 3D 变换的平滑初始过渡
Achieving a slick initial transition to 3D transform with parallax effect
我一直在试验这种效果：
https://codepen.io/PressOnThis/pen/NbmGPR
想法是存在的，但您会注意到当光标进入 div 时初始过渡（或此时缺乏）是块状的。 （我已将背景设置为洋红色以突出这些缺陷）到目前为止，我已经尝试了一些方法，例如在它开始无限期捕获鼠标位置之前的超时，但我仍在努力实现这种光滑的过渡。 CSS 转换在这里显然没有用，因为它需要捕获鼠标在 mousemove.
上的位置
我怎样才能做到这一点？
我尝试根据图片缩放的进度减小图片旋转的角度，查看：https://codepen.io/pitetsky/pen/qqwOvB。
抱歉，没有评论的不是最佳代码。该代码是小实验的产物。所以，简而言之，我做了什么。
最好用rotateX和rotateY乘以图片中心缩放进度的商。一个难点是图片的缩放是通过 CSS transition.
由于 CSS 转换在浏览器中的工作比没有特殊库的 JS 动画更轻微，我没有将图像缩放移动到 JS。
相反，在每次 mouseenter 进入图片时，我会在 0.4 秒内将 scaleTransitionProgress 的值从 0 稍微更改为 1，与 css 过渡长度相同。 mouseleave 上从 1 到 0 同样如此。然后，在跟踪时mousemove，我根据这个值调整阻尼。
其他代码用于解决在previous还在进行时mouseentering到其他图片或者mouseleave还在进行时出现的一些问题
有问题可以问我
我一直在试验这种效果：
https://codepen.io/PressOnThis/pen/NbmGPR
想法是存在的，但您会注意到当光标进入 div 时初始过渡（或此时缺乏）是块状的。 （我已将背景设置为洋红色以突出这些缺陷）到目前为止，我已经尝试了一些方法，例如在它开始无限期捕获鼠标位置之前的超时，但我仍在努力实现这种光滑的过渡。 CSS 转换在这里显然没有用，因为它需要捕获鼠标在 mousemove.
我怎样才能做到这一点？
我尝试根据图片缩放的进度减小图片旋转的角度，查看：https://codepen.io/pitetsky/pen/qqwOvB。
抱歉，没有评论的不是最佳代码。该代码是小实验的产物。所以，简而言之，我做了什么。
最好用rotateX和rotateY乘以图片中心缩放进度的商。一个难点是图片的缩放是通过 CSS transition.
由于 CSS 转换在浏览器中的工作比没有特殊库的 JS 动画更轻微，我没有将图像缩放移动到 JS。
相反，在每次 mouseenter 进入图片时，我会在 0.4 秒内将 scaleTransitionProgress 的值从 0 稍微更改为 1，与 css 过渡长度相同。 mouseleave 上从 1 到 0 同样如此。然后，在跟踪时mousemove，我根据这个值调整阻尼。
其他代码用于解决在previous还在进行时mouseentering到其他图片或者mouseleave还在进行时出现的一些问题
有问题可以问我