我一直在这里试验这种效果：
https://codepen.io/PressOnThis/pen/NbmGPR
这个想法是存在的，但是当光标进入 div 时，您会注意到初始转换（或此时缺少）是块状的。 （我已将背景设置为洋红色以突出这些缺陷）到目前为止，我已经尝试了一些事情，例如在它开始无限期地捕获鼠标位置之前的超时，但我仍在努力实现这种光滑的过渡。 CSS 过渡在这里显然没用，因为它需要捕获mousemove 上的鼠标位置。
我怎样才能做到这一点？
【问题讨论】：
标签： javascript jquery html css frontend
我尝试根据图片缩放的进度来减小图片旋转的角度，请查看：https://codepen.io/pitetsky/pen/qqwOvB。
抱歉，没有 cmets 的代码不是最优化的。该代码是少量实验的产物。所以，简而言之，我做了什么。
最好将rotateX 和rotateY 乘以图片中心缩放进度的商。一个难点是图片的缩放是通过 CSS transition 进行的。
由于 CSS 过渡在浏览器中比没有特殊库的 JS 动画更有效，因此我没有将图像缩放转移到 JS。
相反，在每张 mouseenter 进入图片时，我会在 0.4 秒内将 scaleTransitionProgress 的值从 0 略微更改为 1，与 css 过渡长度相同。同样地，mouseleave 上从 1 到 0。然后，在跟踪mousemove 时，我会根据这个值调整阻尼。
其他代码用于消除鼠标进入其他图片时出现的一些问题，而上一个仍在进行中，或者当鼠标离开仍在进行中时。
有任何问题可以问我。
【讨论】：